Angular: accessing directive attributes in controller constructor

Question

(Using Angular 1.5)

I am trying to use the following design pattern for my angular app:

angular.module("app").directive("MyDirective", MyDirective);

function MyDirective () {
  return {
    bindToController: {
      someId: "=",
      otherAttr: "@"
    },
    controller: ["$attrs", MyController],
    controllerAs: "ctrl"
  };
}

function MyController ($attrs) {
  var self = this;
  console.log(self);
  console.log($attrs);
}

I use my directive in my HTML like this:

<my-directive someId="someParentScope.model._id" otherAttr="1">

In the console, for self I see:

Object { otherAttr: undefined, someId: undefined }

and for $attrs I see:

Object { $attr: Object, $$element: Object, otherattr: "1",
  someid: "someParentScope.model._id", otherAttr: undefined, someId: undefined,
  $$observers: Object }

How may I accomplish what I am trying to accomplish (i.e. passing data from parent scope into my directive controller constructor), and why is even my single binding ("@" binding) otherAttr undefined in the controller constructor? Is this design pattern is flawed/misguided? Thanks!

diegochavez · Accepted Answer · 2015-12-28 05:12:24Z

2

looks like you have the naming conventions wrong on the directive, you should define the name on directive attribute as "data-content" and use on the controller as "dataContent"

Take a look this demo i've done

// directive HTML    
<my-directive some-id="name" other-attr="1"></my-directive>

//app.js 
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('myDirective', function() {
        return {
          restrict: 'E',
          bindToController: {
            someId: "=",
            otherAttr: "@"
          },
          controller: ["$attrs", MyController],
          controllerAs: "ctrl"
        }
      });


function MyController ($attrs) {
  var self = this;
  console.log(self);
  console.log($attrs);
}

http://plnkr.co/edit/P3VKdO?p=preview

answered Dec 28, 2015 at 5:12

diegochavez

6628 silver badges13 bronze badges

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

1 Comment

Brian Over a year ago

Wow--that was it, thanks! That part wasn't really clear to me from the docs--I thought the camelcase conversion was just something angular would do if you used hyphens in your attribute/directive names.

Collectives™ on Stack Overflow

Angular: accessing directive attributes in controller constructor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related