Currently, I am in the process of updating some code within a personal project that utilizes Angular to adhere to best practices. I have come across suggestions that the future direction of Angular involves incorporating a significant amount of functionality into controllers of directives. This method appears to offer a structured approach to organizing code.
However, I am facing an issue with getting the isolate scope to function properly when assigning a controller to my directive. Despite extensively searching for solutions online, none of the resources I found were able to resolve my problem. Here is a snippet of the code in question:
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
};
});
I have used this as a test scenario before refactoring the actual functionality. Yet, enabling the commented-out lines results in losing access to the isolate scope and consequently all associated data (particularly within an array object utilized in an ng-repeat loop).
A similar dilemma arises in a nested directive embedded within the primary one. Interestingly, I can successfully employ a method by defining it under $scope, whereas using controllerAs renders the method inaccessible. The confusion deepens since I adopted this approach (removing scope) from a resource cited by Lauren here: this website
Below is the code snippet for the nested directive:
'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',
};
});
Whether these issues are interlinked or distinct remains uncertain, though they share similarities. Any assistance or guidance towards relevant resources would be greatly appreciated, as I aim to avoid inconsistent coding practices stemming from incomplete comprehension of underlying mechanisms.
Thank you!