Looking to configure my directive module via app level controllers. Check out Plunker
index.html
<div ng-controller="App">
<foodz index="index"></foodz>
</div>
app.js
angular.module('app', ['foodz']).
controller('App', ['$scope',function($scope){
$scope.index = 1;
}]);
foodz.js
angular.module('foodz', []).
controller('foodzController', ['$scope',function($scope){
//External API data is being utilized
$scope.$on('foodzFetched', function(e,d) {
$scope.foodz = d;
});
//Example data structure:
//[{"name":"banana"},{"name":"smoothy"}]
}]).
directive('foodz', function() {
return {
restrict: 'E',
scope:{
index: '@'
},
replace: true,
controller: 'foodzController',
templateUrl: 'foodzTemplate.html',
link: function(scope, controller) {}
};
});
foodzTemplate.html
<div ng-controller="foodzController">
<span>
{{foodz[index].name}}
</span>
</div>
This code snippet showcases passing the index through the app level controller into an attribute of the directive element that has its own unique controller.
Any suggestions for improvement on this setup?