Angularjs: how to pass scope variables to a directive?

angularjs, directive, javascript, scope

Solution

Read Attributes/observing interpolated attributes section of the directive docs. During the link phase the attributes haven't been set.

There are several ways including using `attrs.$observe` or `$timeout`.

app.directive('createControl', function($timeout){
 return function(scope, element, attrs){
      attrs.$observe('createControl',function(){
        console.log(' type:',attrs.createControl);
         element.text('Directive text, type is: '+attrs.createControl);
      });
  }
}) ;

DEMO

Problem

I am trying to use directive to create and append several tags to a `<div>` as shown below: ``` module.directive('createControl', function(){ return function(scope, element, attrs){ console.log(attrs.createControl); // undefined } }); <div class="control-group" ng-repeat="(k, v) in selectedControls"> <div create-control="{{ v.type }}"></div> </div> ``` In attrs I have this construction: ``` $$element: b.fn.b.init[1] $$observers: Object $attr: Object createControl: "date" style: "margin-right: 15px" __proto__: Object ``` But when I try to use `attrs.createControl` I get `undefined` and I do not understand why. Actual question: how to pass scope variable to a directive?

Original source