Reputation: 5152
Folks, I am an AngularJS newbie and I am trying to create a basic HTML hierarchy bound to a model hierarchy using Angular. My top-level module looks like this:
angular.module('fooApp', ['ngResource', 'myList']) which is declared as ng-app="fooApp" at the root div for my page.
I then have HTML that looks like this in my page:
<my-item-list/>
I have a second module that looks like this:
var myList = angular.module('myList', []);
myList.directive('myItemList', function factory() {
var directiveDefinitionObject = {
priority: 0,
templateUrl: '/assets/partials/my-item-list.html',
replace: false,
transclude: false,
restrict: 'E',
scope: false,
controller: function($scope, $element, $attrs, $transclude) {
// No Op
$scope.foo = 'bar';
},
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
// No Op
},
post: function postLink(scope, iElement, iAttrs, controller) {
// No OP
}
}
},
link: function postLink(scope, iElement, iAttrs) {
// No Op
}
};
return directiveDefinitionObject;
});
The partial HTML template just contains a table and an ng-repeat on a tag. The template renders just fine, but my JavaScript console contains :
Error: No controller: myItemList
at Error (<anonymous>)
at h (http://localhost:9000/assets/javascripts/angular.min.js:41:458)
at i (http://localhost:9000/assets/javascripts/angular.min.js:43:415)
at http://localhost:9000/assets/javascripts/angular.min.js:48:191
at http://localhost:9000/assets/javascripts/angular.min.js:94:307
at h (http://localhost:9000/assets/javascripts/angular.min.js:78:33)
at http://localhost:9000/assets/javascripts/angular.min.js:78:266
at Object.e.$eval (http://localhost:9000/assets/javascripts/angular.min.js:88:347)
at Object.e.$digest (http://localhost:9000/assets/javascripts/angular.min.js:86:198)
at Object.e.$apply (http://localhost:9000/assets/javascripts/angular.min.js:88:506) <my-item-list>
I intend for the nesting to increase (e.g. replace the in the HTML partial template with another directive and I really need to figure out what I'm doing wrong. It feels like I'm doing some kind of newbie mistake. Whenever I add a 'require' attribute to my directive definition, I get the same "no controller" error message, but with the name of whatever I required (even if I try and require ngRepeat or the page's master controller).
Upvotes: 2
Views: 3650
Reputation: 4153
Found a solution for this...
Directives should be nested, example,
<directive-parent>
<directive-child></directive-child>
</directive-parent>
Check it our here:
https://groups.google.com/d/msg/angular/SRKL0wZtSew/6sToIKLkRHQJ
Upvotes: 1
Reputation: 20073
It looks like a bug in Angular: http://github.com/angular/angular.js/issues/1903
Does your directive really need a controller? I would say 9 times out of 10 directives do not need their own controller (mostly they just need link
).
When you remove controller
from the directive, the error appears to go away.
Edit: More specifically, it appears that the problem arises when you combine controller
and compile
. Any other combination (controller+link, compile+link, or any by themselves) works fine.
Upvotes: 6