AngularJS隔离指令-数据不在.controller中绑定（但在.link中工作）

在AngulerJS 1中创建了自定义指令。它在隔离范围内，并且是数据感知的（从服务器API获取数据）。其定义如下：

var dirJobView = function ($location, serviceData) {
    return {
        restrict: 'A',
        templateUrl: '/app/views/Jobs/Item.html',
        scope: {
            itemid: "@"
        },
        controller: ['$scope', function ($scope) {
            scope = $scope;
            // does not work - data is not displayed in view:
            serviceData.get('jobs', scope.itemid).then(function (data) {
                scope.dataJobView = data;
            });
        }],
        link: function (scope, elem, attrs, ctrl) {

        }
    };
}

controller: ['$scope', function ($scope) {
            var scope = $scope;
            // does not work - data is not displayed in view:
            serviceData.get('jobs', scope.itemid).then(function (data) {
                scope.dataJobView = data;
            });
        }],

上述操作不起作用-数据已加载，但视图未显示数据。更确切地说，只有在浏览器中强制“清除缓存并硬重新加载”时，才会显示它

但是，如果我将服务调用移动到link函数，它会运行良好，如下所示：

var dirJobView = function ($location, serviceData) {
    return {
        restrict: 'A',
        templateUrl: '/app/views/Jobs/Item.html',
        scope: {
            itemid: "@"
        },
        controller: ['$scope', function ($scope) {
            scope = $scope;

        }],
        link: function (scope, elem, attrs, ctrl) {
            // Moved from controller, now works
            serviceData.get('jobs', scope.itemid).then(function (data) {
                scope.dataJobView = data;
            });
        }
    };
}

据我所知，link函数用于操作DOM，控制器用于调用服务和定义行为。对服务数据的调用应该放在控制器中，不是吗

---

为什么上面的工作方式是这样的？

发现了问题。在“scope=$scope；”中缺少一个“var”。控制器def主体应如下所示：

var dirJobView = function ($location, serviceData) {
    return {
        restrict: 'A',
        templateUrl: '/app/views/Jobs/Item.html',
        scope: {
            itemid: "@"
        },
        controller: ['$scope', function ($scope) {
            scope = $scope;
            // does not work - data is not displayed in view:
            serviceData.get('jobs', scope.itemid).then(function (data) {
                scope.dataJobView = data;
            });
        }],
        link: function (scope, elem, attrs, ctrl) {

        }
    };
}

controller: ['$scope', function ($scope) {
            var scope = $scope;
            // does not work - data is not displayed in view:
            serviceData.get('jobs', scope.itemid).then(function (data) {
                scope.dataJobView = data;
            });
        }],

---

发现了问题。在“scope=$scope；”中缺少一个“var”。控制器def主体应如下所示：

var dirJobView = function ($location, serviceData) {
    return {
        restrict: 'A',
        templateUrl: '/app/views/Jobs/Item.html',
        scope: {
            itemid: "@"
        },
        controller: ['$scope', function ($scope) {
            scope = $scope;
            // does not work - data is not displayed in view:
            serviceData.get('jobs', scope.itemid).then(function (data) {
                scope.dataJobView = data;
            });
        }],
        link: function (scope, elem, attrs, ctrl) {

        }
    };
}

controller: ['$scope', function ($scope) {
            var scope = $scope;
            // does not work - data is not displayed in view:
            serviceData.get('jobs', scope.itemid).then(function (data) {
                scope.dataJobView = data;
            });
        }],

只需在

scope.dataJobView=data

之后的控制器中尝试

scope.$apply（）

，并检查是否有任何更改。只需在

scope.dataJobView=data

之后的控制器中尝试

scope.$apply（）

，并检查是否有任何更改。