How can I use a registered controller in my angular directive?

问题

I have a controller registered like this:

myModule.controller('MyController', function ($scope, ...some dependencies...)
{
    ....

Using ng-controller="MyController" in the HTML it all works fine, but now I want to use this controller as my directive's controller. Some thing like this:

otherModule.directive('myDirective', function() {
    return {
        restrict: 'A',
        replace: true,
        controller: ??????????,
        scope: {
            foo: '=',
            blah: '=',
        },
        template: '....'
    }
});

I tired just putting MyController but it errors out saying "MyController is not defined". I'm sure if I just put MyController in the global namespace, it would work fine, but I don't want anything in the global namespace. If it makes a difference, myModule is defined as a dependency for otherModule. How can I get a reference to this controller for my directive to use?

As suggested, I tried $controller('MyController'), but now I am getting the following error:

Error: Unknown provider: $scopeProvider <- $scope <- myDirectiveDirective
at Error (<anonymous>)
at http://localhost/resources/angular.js?_=1360613988651:2627:15
at Object.getService [as get] (http://localhost/resources/angular.js?_=1360613988651:2755:39)
at http://localhost/resources/angular.js?_=1360613988651:2632:45
at getService (http://localhost/resources/angular.js?_=1360613988651:2755:39)
at invoke (http://localhost/resources/angular.js?_=1360613988651:2773:13)
at Object.instantiate (http://localhost/resources/angular.js?_=1360613988651:2805:23)
at http://localhost/resources/angular.js?_=1360613988651:4621:24
at otherModule.directive.restrict (http://localhost/resources/app.js?_=1360613988824:862:15)
at Object.invoke (http://localhost/resources/angular.js?_=1360613988651:2786:25)

I'm not sure what to make of this error. Is there more needed to make this work?

回答1:

It appears that you can just use:

controller: 'MyController'

IF the controller is in the same module as the directive or a higher level module composed of the module with the directive in it.

When I tried it with two different modules composed into an app module (one for the controller and one for the directive), that did not work.

回答2:

The answer you've already accepted works, and in almost all cases should be chosen...

For sake of completeness: Here is how you can use a controller from another module

(PS: Don't do this. lol :P)

var app = angular.module('myApp', ['myDirectives']);

app.controller('AppCtrl1', function($scope) {
    $scope.foo = 'bar';
});


var directives = angular.module('myDirectives', []);

directives.directive('test', function($controller) {
   return {
       template: '<h1>{{foo}}</h1>',
       link: function(scope, elem, attrs) {
          var controller = $controller('AppCtrl1', { $scope: scope });

          console.log($scope.foo); //bar
       }
   };
});

来源：https://stackoverflow.com/questions/14819776/how-can-i-use-a-registered-controller-in-my-angular-directive

标签

angularjs

angularjs-directive