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

Posted 2021-04-14

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

谢谢！

答案

我假设您要做的是在指令声明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+