Область действия директивы не определена в контроллере

0

Я пытаюсь сделать http-запрос в моем контроллере, но мой $scope.dataSource возвращается как undefined, и я не уверен, почему. Я строю директиву следующим образом:

app.directive('users', function(){
    return {
        restrict: 'E',
        templateUrl: '/templates/dashboard/config/users.html',
        scope: {
            dataSource: '@'
        },
        controller: function($scope, $http){
            $http({
                url: $scope.dataSource
            }).success(function(data){
                $scope.data = data;
            });
        }
    };
});

И html вроде этого, но он не запускает запрос ajax, поскольку параметр $scope.dataSource не undefined.

<users class="col-sm-4" data-source="/data/users.json"></users>
  • 0
    Попробуйте изменить data-source на source . Я не могу вспомнить, где, но я хоть где-то видел, что атрибуты data- плохо работают с пользовательскими директивами
  • 1
    @vinayakj это не имеет отношения к AJAX, проблема в том, что URL, который он пытается передать в свою директиву, появляется неопределенным
Показать ещё 5 комментариев
Теги:

3 ответа

0
Лучший ответ

Переместите его в функцию часов:

app.directive('users', function($http) {
    return {
        restrict: 'E',
        templateUrl: '/templates/dashboard/config/users.html',
        scope: {
            source: '@'
        },
        link: function($scope){
            $scope.watch('source', function(source) {
              if (dataSource !== undefined) {
                $http({
                    url: source
                }).success(function(data){
                    $scope.data = data;
                });
              }
            });
        }
    };
});
Поделиться
  • 0
    Почему отрицательный голос?
  • 0
    Я не понизил голос, но вы можете использовать $http в link без ее определения?
Показать ещё 4 комментария
0

Вам не нужен controller вам понадобится link функцию и передать scope и $http к нему.

app.directive('users', function($http){
    return {
        restrict: 'E',
        templateUrl: '/templates/dashboard/config/users.html',
        scope: {
            dataSource: '@'
        },
        transclude: true,
        link: function(scope, elem, attrs){
            $http({
                url: scope.dataSource
            }).success(function(data) {
                $parent.$scope.data = data; // where data is a model in parent controller.
            });
        }
    };
});
Поделиться
0

Использование $attrs позволяет мне получить значение следующим образом:

app.directive('users', function(){
    return {
        restrict: 'E',
        templateUrl: '/templates/dashboard/config/users.html',
        scope: {
            dataSource: '@'
        },
        controller: function($scope, $http, $attrs){
            $http({
                url: $attrs.source
            }).success(function(data){
                $scope.data = data;
            });
        }
    };
});

Я все еще использую dataSource в области и html, но использую $attrs.source в контроллере.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню