Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 338
dnc253 Avatar asked Feb 11 '13 19:02

dnc253


People also ask

Which directive is used for controller in Angular?

AngularJS ng-controller Directive The ng-controller directive adds a controller to your application. In the controller you can write code, and make functions and variables, which will be parts of an object, available inside the current HTML element. In AngularJS this object is called a scope.

How do you access the directive variable in a controller?

You just create a myVar variable in your controller and pass it to the directive using my-var attribute. Since you are using two way binding, any changes made to myVar by the directive are available in your controller. You can put a watch on myVar to track the changes. Show activity on this post.

Can we put nested controllers in an Angular application?

Nested Controllers: AngularJS allows using nested controllers. It means that you have specified a controller in an HTML element which is a child of another HTML element using another controller.

What is the difference between controller and link in directives?

Answer:The link option is just a shortcut to setting up a post-link function. controller: The directive controller can be passed to another directive linking/compiling phase. It can be injected into other directices as a mean to use in inter-directive communication.


1 Answers

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.

like image 192
Ryan O'Neill Avatar answered Oct 25 '22 05:10

Ryan O'Neill