Angular custom directive: a strange error occurs when set controller attribute to `function(scope){}`

Question

When I wrote a custom directive, a strange error blocks me.

angular.module('app.directives', [])
.directive('cyMenu', ['RecursionHelper', function(RecursionHelper) {
    function postLink(){};
    return {
        restrict: 'E',
        templateUrl: 'views/component/cy-menu.html',
        replace: true,
        transclude: false,
        require: '?^cyMenu',
        controller: function ($scope) { // when set this argument($scope) to scope, error occurs.
            this.getList = function() {
                return $scope.list;
            }
        },
        scope: {
            list: '=',
            isSubmenu: '@'
        },
        compile: function(tElement) {
            return RecursionHelper.compile(tElement, postLink);
        }
    }
}

As I pointed out(see comment), when I set controller attribute to controller: function (scope) {}, the error occurs:

Error: [$injector:unpr] Unknown provider: scopeProvider <- scope
http://errors.angularjs.org/1.3.6/$injector/unpr?p0=scopeProvider%20%3C-%20scope
...

I don't know why. Any help will be appreciated.

update

Here is angular's official demo, it looks similar to my directivehttps://code.angularjs.org/1.3.6/docs/guide/directive:

angular.module('docsTabsExample', [])
.directive('myTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function($scope) {
      ...
    },
    templateUrl: 'my-tabs.html'
  };
})

the injection seems to fail because you are trying to do it in the 'controller' argument, it can often bit tricky to do it there. YOu should try to define the controller in a separate file and inject it by name in the 'controller' argument. — sam, Dec 16 '14 at 10:41
@sam Could you tell me why or explain more detailed? I find the official demo is doing the same: https://code.angularjs.org/1.3.6/docs/guide/directive ---- `myTabs` demo. — creeper, Dec 16 '14 at 10:47

score 0 · Accepted Answer · edited Mar 13 '15 at 03:40

0

A very good practice is to separate every component in a separate file, so I would start by putting your controller in a file like that :

//File recursionHelperController.js
(function() {
  'use strict';

  angular
    .module('app.controllers')
    .controller('RecursionHelperController', RecursionHelperController);

  RecursionHelperController.$inject = ['$scope'];

  function RecursionHelperController($scope) {
     //do your stuff
  }

})();

Note that I gave you the most correct format I know for a controller or any angular element in general, but you can do something simpler like:

angular.module('app.controllers')
.controller('RecursionHelperController', ['$scope', function($scope) {
         //do your stuff
      }])

You can then call this controller in your main file :

controller: 'RecursionHelperController'

Hope it helps

Update :

Sometimes the automatic injection has some troubles that's why I recommend doing it this way with an explicit injection. The angular doc only shows the simplest way for clarity and tutorial purposes

Update 2

If you don't want to separate the controller, try using the injection safe notation

controller : ['$scope', function($scope) {
     //do your stuff
  }])

edited Mar 13 '15 at 03:40

user229044

232,980
40
330
338

answered Dec 16 '14 at 10:58

sam

3,441
2
33
42

Thanks for your explanation. In my code, `RecursionHelper` is a service to help handle recursive directive and I split it to another file. But the `controller` is only used to enable my recursive directives can communicate to each other, so I don't want to seprate it. The `Sometimes the automatic injection has some troubles` you wrote may be what I really want. – creeper Dec 16 '14 at 11:11
1

Then you should use the explicit injection notation like I just put in update 2 ( or in a few seconds ;) ) – sam Dec 16 '14 at 11:12
Did my last idea worked ? I ask because I never tried myself – sam Dec 16 '14 at 11:33
Glad to know. Though I honestly never found out why this explicit injection was necessary – sam Dec 16 '14 at 11:38
I'm searching details about injection, and if you know something, it'll be kindful to update this answer and let me know. – creeper Dec 16 '14 at 11:43
What's more disturbing is that this notation I suggested to use is originally designed to allow minifaction safe process, not for forcing injection. Let me know too if you find something with a comment for example :) – sam Dec 16 '14 at 11:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66995/discussion-between-sam-and-creeper). – sam Dec 16 '14 at 11:47

Angular custom directive: a strange error occurs when set controller attribute to `function(scope){}`

1 Answers1