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?
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With