Javascript 在$http.get的AngularJS指令中加载模板属性_Javascript_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Templates

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

javascript angularjs

Javascript 在$http.get的AngularJS指令中加载模板属性,javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-templates,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Templates,我是使用angularjs的新手，我正在尝试创建指令。我的问题是，如何从html更改$http.get的URL。这是我的代码： HTML指令： <form-directive text="Formulario con Directiva" nameinput="true" namelabel="Nombre:" emailinput="true" emaillabel="Email:" subjetinput="true" s

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

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

JS:

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

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


angular.module（'testDirective'，[]）
.controller（'testDir'，函数（$scope，$http）{
$scope.textoFalopa=“Hola，es una prueba”；
})
.directive（'formDirective'，function（）{
返回{
限制：“EA”，
templateUrl:“./template.html”，
范围：{
正文：“@”，
nameinput:'=nameinput'，
名称标签：'@'，
emailinput:'=emailinput'，
emaillabel:“@”，
SubjectInput:'=SubjectInput'，
SubjectLabel:“@”，
消息：'=消息'，
messagelabel:“@”，
数据URL:“=”
},
控制器：['$scope'，'$http'，函数（$scope，$http）{
$http.get（'https://jsonplaceholder.typicode.com/users）。然后（函数（remotedata）{
日志（remotedata.data）；
$scope.data=remotedata.data；
});
}],
链接：功能（范围）{
console.log（范围）；
}
};
});

谢谢大家!

我假设您希望做的是获取指令声明中属性的值

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和/或

bindToController

如果您只想获取属性，另一种解决方案（但可能比较麻烦）是注入

$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+