AngularJS - Getting an attribute value from a directive

Question

OK, so I have a directive which takes attributes and reads it (and writes it out).

Here is the plunker: http://embed.plnkr.co/IkKPLahPc9yqeHWEQUG3/

I think it's because of the controller: ctrl inside main-directive.js which has nothing whereas the actual action is happening inside the isolated directive's controller controller.

Here is the main-directive.js:

var app = angular.module('testapp.directive.main', ['main']);


app.directive('myCustomer', function() {

  var controller = ['$scope', function($scope) {

    $scope.dan = { 'name': 'Dan', 'nationality': 'ESP' };
    // scope from here obv...

  }];

  var template = 'Getting attribute value of =getInfo... {{getInfo.name}} from {{getInfo.nationality}}';

  return {
    restrict: 'E',
    controller: controller,
    scope: {
      getInfo: "=info"
    },
    template: template
  };
});

app.controller('ctrl', function($scope) {

})

and here's my template:

<div ng-controller="ctrl">
    <my-customer info="dan">
    </my-customer>
</div>

Why is my directive not reading the attribute of info?

Shane Edwards · Accepted Answer · 2015-12-01 23:10:07Z

1

You're right, the $scope.dan object needs to be in the ‘ctrl’ controller scope and pulled out of the isolate directives controller scope.

app.controller('ctrl', function($scope) {
    $scope.dan = { 'name': 'Dan', 'nationality': 'ESP' };
})

This is applicable to the method of two-way data binding that you have set up for getInfo used by "=info"

edited Dec 1, 2015 at 23:10

answered Dec 1, 2015 at 23:05

Shane Edwards

462 bronze badges

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

7 Comments

mcgraphix Over a year ago

This is the correct answer. I didn't even catch that it was on the directive's controller scope

Shane Edwards Over a year ago

I usually write controller methods directly within the return {} object for clarity.

Shane Edwards Over a year ago

But if you don't like that, you can also pull out the function expression and point to a function Declaration(){}, for example, use { controller: Declaration } within the return body.

mcgraphix Over a year ago

I typically do app.controller("MyDirectiveController") as a totally separate thing and then reference it in {controller: 'MyDirectiveController'}. I like having the controller completely separate for easier unit testing.

red Over a year ago

I see where my problem lies. But I'd like to have the data in the isolated controller controller inside the directive instead of the controller ctrl. How do I do that?

|

mcgraphix · Accepted Answer · 2015-12-01 23:03:46Z

The way that is coded, it is expecting the ctrl controller to have a property called "dan" on its scope. If you are just passing in the string 'dan', you want to change your directive to use @ instead of =

    app.directive('myCustomer', function () {

        var controller = ['$scope', function ($scope) {

            $scope.dan = {'name': 'Dan', 'nationality': 'ESP'};
            // scope from here obv...

        }];

        var template = 'Getting attribute value of =getInfo... {{getInfo.name}} from {{getInfo.nationality}}';

        return {
            restrict: 'E',
            controller: controller,
            scope: {
                getInfo: "@info" //<--NOTE THE CHANGE HERE
            },
            template: template
        };
    });

Collectives™ on Stack Overflow

AngularJS - Getting an attribute value from a directive

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related