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

Question

Я пытаюсь сделать 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, как это, но он не работает Аякс запроса, потому что $scope.dataSource является undefined.

<users class="col-sm-4" data-source="/data/users.json"></users> 

Answer 1

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

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; 
       }); 
       } 
      }); 
     } 
    }; 
}); 

Answer 2

Вам не нужен 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. 
      }); 
     } 
    }; 
}); 

Answer 3

Использование $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 в контроллере.