在 $http.get 的 AngularJS 指令中加载模板属性答案

【问题标题】：Load template attribute in AngularJS directive for $http.get在 $http.get 的 AngularJS 指令中加载模板属性
【发布时间】：2019-03-21 13:51:34
【问题描述】：

我是使用 angularjs 的新手，我正在尝试创建指令。我的查询是，如何从 html 更改 $http.get 的 URL。这是我的代码：

HTML 指令：

<form-directive text="Formulario con Directiva" nameinput="true"
                namelabel="Nombre:" emailinput="true"
                emaillabel="Email:" subjetinput="true" subjetlabel="Asunto:" 
                message="true" messagelabel="Mensaje:"
                dataurl="URL to change">
</form-directive>

JS：

<script>
    angular.module('testDirective', [])
        .controller('testDir', function ($scope, $http) {
            $scope.textoFalopa = "Hola, es una prueba";
        })
        .directive('formDirective', function () {
            return {
                restrict: "EA",
                templateUrl: './template.html',
                scope: {
                    text: '@',
                    nameinput: '=nameinput',
                    namelabel: '@',
                    emailinput: '=emailinput',
                    emaillabel: '@',
                    subjetinput: '=subjetinput',
                    subjetlabel: '@',
                    message: '=message',
                    messagelabel: '@',
                    dataurl:'='
                },
                controller: ['$scope', '$http', function ($scope, $http) {
                    $http.get('https://jsonplaceholder.typicode.com/users').then(function (remotedata) {
                        console.log(remotedata.data);
                        $scope.data = remotedata.data;
                    });
                }],
                link: function (scope) {
                    console.log(scope);
                }
            };
        });

</script>

谢谢！

【问题讨论】：

您的意思是从 JavaScript 更改 $http.get 调用，而不是从 HTML 调用？
重新分解应用程序以让父控制器从服务器获取数据会更明智。避免表单组件中的异步操作，因为这会使测试和调试变得困难。

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-templates

【解决方案1】：

我假设您要做的是获取指令声明 dataurl="URL to change" 上的属性值，并将其用作 $http 调用中的 URL。

scope 对象中的属性定义了这些属性与 AngularJS 范围的绑定（注入为 $scope）。

您已经将dataurl 绑定到您的作用域，所以您已经完成了一半。现在，在您发布的示例中获取最直接的方法是在控制器中使用 $scope 对象。像这样：

angular.module('testDirective').directive('formDirective', function () {
            return {
                restrict: "EA",
                templateUrl: './template.html',
                scope: {
                    text: '@',
                    nameinput: '=nameinput',
                    namelabel: '@',
                    emailinput: '=emailinput',
                    emaillabel: '@',
                    subjetinput: '=subjetinput',
                    subjetlabel: '@',
                    message: '=message',
                    messagelabel: '@',
                    dataurl:'='
                },
                controller: ['$scope', '$http', function ($element, $http) {
                    $http.get($scope.dataurl).then(function (remotedata) {
                        console.log(remotedata.data);
                    });
                }]
            };
        });

请注意，现在使用 AngularJS 的最佳实践是仅在需要高级功能时直接使用 $scope。对于这种简单的情况，您不需要注入它。我建议研究 AngularJS components 和/或 bindToController property。

如果您只想获取该属性，另一种（但可能是混乱的）解决方案是注入 $element，它使您可以访问底层 jQuery 对象。

angular.module('testDirective').directive('formDirective', function () {
            return {
                restrict: "EA",
                templateUrl: './template.html',
                controller: ['$element', '$http', function ($scope, $http) {
                    $http.get($element.attr('dataurl')).then(function (remotedata) {
                        console.log(remotedata.data);
                    });
                }]
            };
        });

虽然这不是真正的“角度方式”，但我只会将它用于快速破解或混乱的解决方法。

所以你有三种方法。任何一个都可以，但我建议学习组件和控制器绑定，因为这将鼓励良好的实践，让你有利于学习 Angular 2+

【讨论】：