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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在AngularJS指令中为$ http.get加载模板属性相关的知识,希望对你有一定的参考价值。

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

以上是关于在AngularJS指令中为$ http.get加载模板属性的主要内容,如果未能解决你的问题,请参考以下文章

如何在 AngularJS 中为 ngInclude 指令指定模型?

angularjs在不同文件中为同一个模块定义服务

从 JSON 文件 AngularJS 注入的编译指令

在 AngularJS 中缓存 HTTP 'Get' 服务响应?

AngularJS:使用 FabricJS/Canvas 进行测试

如何在 AngularJS 中从 $http.get 返回图像