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和/或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+奠定良好的基础。

在AngularJS指令中为$ http.get

1 个答案: