Angular js access associated controller from within directive

Question

With HTML like this...

<div ng-app="myApp">
    <div ng-controller="inControl">
        I like to drink {{drink}}<br>
        <input my-dir ng-model="drink"></input>
    </div>
</div>

and javascript like this...

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

app.controller('inControl', function($scope) {
    $scope.drink = 'water';
});

app.directive('myDir', function(){
    return {
        restrict: 'A',
        link: function($scope, element, attrs, ctrl) {

            // why is this logging undefined?
            console.log(ctrl);

        }
    };
});

Why can I not access the controller from within my directive? Why is my call to ctrl giving me undefined?

EDIT: add demo...

Fiddle available here: http://jsfiddle.net/billymoon/VE9dX/

What do you want to access from the controller? You have access to the scope? — tymeJV
– tymeJV, Commented Feb 5, 2014 at 19:27
jsbin.com/neka/1/edit?html,js,console,output I added the controller property to the directive and it appears to be working for me. I prefer jsbin over jsfiddle — Mike Cheel
– Mike Cheel, Commented Feb 5, 2014 at 19:34
Not getting any errors in my console on that fiddle. Works fine. — Christopher Marshall
– Christopher Marshall, Commented Feb 5, 2014 at 19:34
Think I got it... need to add require: 'ngModel', to return object — Billy Moon
– Billy Moon, Commented Feb 5, 2014 at 19:37

Lalit Sachdeva · Accepted Answer · 2014-02-05 19:40:59Z

1

see multiple controller can be attached with one app and simillarly multiple directive can be attached with one app, so if you wants to use one controller in one directive than you can set the controller property of directive to the name of the controller you wants yo attach with like in your case

app.directive('myDir', function(){
    return {
        restrict: 'A',
        controller: 'inControl'

        link: function($scope, element, attrs, ctrl) {
            // why is this logging undefined?
            console.log(ctrl);
        }
    };
});

answered Feb 5, 2014 at 19:40

Lalit Sachdeva

6,6512 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Billy Moon Over a year ago

Looks like it makes sense, but does not work for me - I still get undefined for ctrl inside function.

Billy Moon Over a year ago

As I mentioned in last comment - I think I solved with... require: 'ngModel'

Mendhak · Accepted Answer · 2014-02-05 20:36:41Z

Despite this working with require:ngModel, this still isn't the best approach as it ties the directive directly to the controller. If you want your directive to communicate with your controller, you could be setting and reading off the scope.

HTML:

<div ng-app="myApp">
  <div ng-controller="inControl">
    I like to drink {{drink}}<br />
    <input my-dir="drink"></input>
  </div>
</div>

JS:

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

app.controller('inControl', function($scope) {
    $scope.drink = 'asdfasdf';
});

app.directive('myDir', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            console.log(scope[attrs.myDir]);
        }
    };
});

Alternatively you can use my-dir="{{drink}}" and read it as attrs.myDir.

http://jsfiddle.net/8UL6N/1/

Billy Moon · Accepted Answer · 2014-02-05 20:02:20Z

0

Adding require: 'ngModel', fixed it for me - not sure if there is another way to specify it...

app.directive('myDir', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, element, attrs, ctrl) {

            // why is this logging undefined?
            console.log(ctrl);

        }
    };
});

answered Feb 5, 2014 at 20:02

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Collectives™ on Stack Overflow

Angular js access associated controller from within directive

Fiddle available here: http://jsfiddle.net/billymoon/VE9dX/

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Fiddle available here: http://jsfiddle.net/billymoon/VE9dX/

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest