Angularjs: как передать переменные области в директиву?

Я пытаюсь использовать директиву для создания и добавления нескольких тегов к <div>, как показано ниже:

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>

В attrs у меня есть эта конструкция:

$$element: b.fn.b.init[1]
$$observers: Object
$attr: Object
createControl: "date"
style: "margin-right: 15px"
__proto__: Object

Но когда я пытаюсь использовать attrs.createControl, я получаю undefined, и я не понимаю, почему. Фактический вопрос: как передать переменную scope в директиву?

Ответы

Ответ 1

Прочитайте Атрибуты/наблюдения интерполированных атрибутов раздела директивных документов. Во время фазы ссылки атрибуты не были установлены.

Существует несколько способов использования attrs.$observe или $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

Ответ 2

    app.directive('createControl', function() {
      return {
        scope: {
          createControl:'='
        },
        link: function(scope, element, attrs){    
           element.text(scope.createControl);    
        }      
      }
    })  

  <div class="control-group" ng-repeat="v in [{type:'green'}, {type:'brown'}]">
    <div create-control="v.type"></div>
   </div>

Ответ 3

Если v.type может измениться (т.е. вам действительно нужно использовать интерполяцию - {{}} s), используйте @charlietfl или @Joe answser, в зависимости от типа области, которую вы хотите, чтобы ваша директива имела.

Если v.type не будет изменяться (т.е. ваша функция связи должна только получать значения один раз, и эти значения гарантированно будут установлены при запуске вашей функции ссылок), вы можете использовать $parse или $eval. Это имеет небольшое преимущество в производительности, так как часы не создаются. (С $observe() и =, Angular устанавливает $watch, которые оцениваются каждый цикл дайджеста.)

<div create-control="v.type"></div>

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

демонстрация