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

Question

我是 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>

谢谢！

Answer 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 and/or the 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 way'，所以我只将它用于快速破解或混乱的解决方法。

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

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

Load template attribute in AngularJS directive for $http.get

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-templates