AngularJS隔离指令 - 数据不在.controller中绑定(但在.link中工作)
问题描述:
在AngulerJS 1中创建了自定义指令。它具有隔离范围,并且具有数据感知能力(从服务器API获取数据)。它的定义如下:AngularJS隔离指令 - 数据不在.controller中绑定(但在.link中工作)
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) {
}
};
}
上述操作无效 - 数据已加载,但视图不显示。更确切地说,如果我在浏览器中强制“清除缓存和硬重新载入”,它只会显示它。
但是,它的工作原理perfeclty好,如果我移动服务调用链接功能,像这样:
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;
});
}
};
}
据我所知,链接功能用于操纵DOM,控制器是指调用服务并定义行为。服务数据的调用应该放在控制器中,不是吗?
为什么上述工作的方式呢?
答
发现问题。在“scope = $ scope;”中缺少“var”。控制器高清体应该是这样的:
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'后的控制器,并检查是否有什么变化。 – Sravan