Загрузите атрибут шаблона в директиву AngularJS для $ http.get - PullRequest
Новая
       36

Загрузите атрибут шаблона в директиву AngularJS для $ http.get

1 голос
/ 21 марта 2019

Я новичок в использовании angularjs и пытаюсь создать директивы. Мой вопрос, как я могу изменить URL-адрес $http.get из HTML. Это мой код:

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>

Спасибо!

1 Ответ

0 голосов
/ 21 марта 2019

Я предполагаю, что вы хотите получить значение атрибута в объявлении директивы dataurl="URL to change" и использовать его в качестве URL в вызове $ http.

Свойства в объекте 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 +

...