我正在尝试更新一个小型个人项目中的一些代码,该项目使用 Angular 来符合更好的实践,我听说 Angular 的未来可以通过将大量功能放入指令控制器中来模仿。我不确定我的理解有多正确,但这似乎是一种组织代码的干净方式。
无论如何,为了解决我的问题,当我给我的指令一个控制器时,我似乎无法让隔离范围工作。我一直在用谷歌搜索我的大脑,试图找出问题所在,我看到了很多关于它的话题,但没有一个能解决我的问题。
这是一个代码片段:
angular.module('myCongresspersonApp')
.directive('congressPersonPane', function () {
var controller = [function() {
}];
return {
templateUrl: 'app/congressPersonPane/congressPersonPane.html',
restrict: 'EA',
scope: {
congressPerson: '=info'
}//,
// controller: controller,
// controllerAs: 'paneCtrl',
// bindToController: true
};
});
这实际上只是在我移动功能之前进行测试的一种方法,但是当我取消注释这些行时,我不再有权访问我传入的隔离范围,并且通过它访问的所有数据都消失了(它是一个数组对象ng-重复)。
我在位于该指令内的指令中也有类似的问题。这个问题让我更加困惑,因为如果我在$scope下定义了一个方法,我可以正确使用它,但是当我使用controllerAs时,我不能使用那个方法。所以当我从这个网站(劳伦在下面提到)中拉出这个实现(以删除范围)时,我非常难过
这是代码:
'use strict';
angular.module('myCongresspersonApp')
.directive('voteRecord', function () {
var controller = ['$scope', 'sunlightAPI', function ($scope, sunlightAPI) {
var voteCtrl = this;
voteCtrl.voteInfo = [];
voteCtrl.test = 'Test';
voteCtrl.pageNumber = 1;
voteCtrl.repId = '';
console.log('inside controller definition');
voteCtrl.getVotingRecord = function(repId) {
console.log('inside method');
voteCtrl.repId = repId;
var promiseUpdate = sunlightAPI.getVotes(repId, pageNumber);
promiseUpdate.then(function(votes) {
console.log('fulfilled promise');
voteCtrl.voteInfo = votes;
console.log(voteCtrl.voteInfo);
}, function(reason) {
console.log('Failed: ' + reason);
}, function(update) {
console.log('Update: ' + update);
});
};
voteCtrl.nextPage = function() {
voteCtrl.pageNumber++;
voteCtrl.getVotingRecord(voteCtrl.repId, voteCtrl.pageNumber);
};
voteCtrl.previousPage = function() {
voteCtrl.pageNumber--;
voteCtrl.getVotingRecord(voteCtrl.repId, voteCtrl.pageNumber);
};
}];
return {
restrict: 'EA',
scope: {
repId: '=representative'
},
controller: controller,
contollerAs: 'voteCtrl',
bindToController: true,
templateUrl: 'app/voteRecord/voteRecord.html',
};
});
我不确定该问题是否与此问题有关,但它们似乎相似。任何可能有帮助的资源的帮助或指导将不胜感激,因为我不想编写我的约定不断变化的代码,因为我不完全理解为什么一件事有效。
谢谢!