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，但它没有运行ajax请求，因为$scope.dataSource是undefined。

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

Answer 1

您不需要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 2

将其移至监视功能：

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

我仍然在范围和html中使用dataSource，但在控制器中使用$attrs.source。

控制器中的指令范围未定义

3 个答案: