I need to have access to model created by directive and in the same time I need to get attrs in the directive.

JS:

module.directive('createControl', function($pile, $timeout){
 return {            
   scope: {        
     name: '=Name' // Dynamically created ng-model in the directive element
   },
   link: function(scope, element, attrs){
     attrs.$observe('createControl', function(){
       attrs.createControl //is empty if scope is an object, otherwise it is passed from html attribute
     }
   }

HTML:

<div class="control-group" ng-repeat="x in selectedControls">
  <div create-control="{{ x }}"></div>
</div>

If scope is defined as an object, attrs is empty, otherwise it is value passed from html.

What the cause of this behavior? How to get access to a passed attrs and to a models?

I need to have access to model created by directive and in the same time I need to get attrs in the directive.

JS:

module.directive('createControl', function($pile, $timeout){
 return {            
   scope: {        
     name: '=Name' // Dynamically created ng-model in the directive element
   },
   link: function(scope, element, attrs){
     attrs.$observe('createControl', function(){
       attrs.createControl //is empty if scope is an object, otherwise it is passed from html attribute
     }
   }

HTML:

<div class="control-group" ng-repeat="x in selectedControls">
  <div create-control="{{ x }}"></div>
</div>

If scope is defined as an object, attrs is empty, otherwise it is value passed from html.

What the cause of this behavior? How to get access to a passed attrs and to a models?

• javascript
• angularjs
• angularjs-directive
• angularjs-scope

• 1 The '=Name syntax requires that your HTML has a Name attribute. E.g., <div create-control="{{ x }}" Name="???"></div> – Mark Rajcok Commented May 7, 2013 at 14:35
• =Name attribute dynamically added in the directive html. So yes it is exists. Furthermore I can get it. The problem with the attrs. – I159 Commented May 7, 2013 at 14:50
• @I159 Can you include your directive HTML where you say Name is dynamically added? – Langdon Commented May 7, 2013 at 15:03
• With an isolate scope, try scope.$parent.$watch(attrs.createControl, function(value) { ... }) instead and see how that works for you. Ideally with an isolate scope you'd pass it in as one of the scope parameters, e.g. createControl: '@'. – Michelle Tilley Commented May 7, 2013 at 16:36

3 Answers 3

The problem: create-control needs to evaluate {{x}} within the parent scope, but by making the scope an object when the directive is declared you create an isolate scope. This means that attrs.createControl doesn't have access to x. Therefore, it is empty.

One solution: You can fix this several ways, the best of which is to configure your directive to accept scope.createControl into its isolate scope through an attribute.

Working fiddle: http://jsfiddle/pvtpenguin/tABt6/

myApp.directive('createControl', function ($pile, $timeout) {
    return {
        scope: {
            name: '@', // Dynamically created ng-model in the directive element
            createControl: '@'
        },
        link: function (scope, element, attrs) {
            scope.$watch('createControl', function () {
                // the following two statements are equivalent
                console.log(attrs.createControl);
                console.log(scope.createControl);
            })
        }
    }
})

Agree with Matt but the following two statements are equivalent only if the attrs is set.

console.log(attrs.createControl);

console.log(scope.createControl);

Otherwise, attrs.createControl will be undefined but scope.createControl will have a function defined.

I need to have access to model created by directive

module.directive('createControl', function($pile, $timeout){

    return {            
        ...
        require:'ngModel',
        link:function(scope, element, attrs, ngMdlCntrl){
            //You have the access to the model of your directive here thr. ngMdlCntrl
        }
        ...
    }})

The require ng-model is for the model at you are setting dynamically.