CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
Kevin Hoffman
Kevin Hoffman

Reputation: 5152

Error: No controller in directive

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

Answers (2)

paolooo
paolooo

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

Langdon
Langdon

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

Related Questions