Как я могу избежать условий гонки при запуске, когда атрибуты директивы интерполируются?

Question

This fiddle должны сделать вещи более ясно, но по сути я назначаю некоторые атрибуты элемента (например, его идентификатор) параметры в своей директиве:

myApp.directive('myDiv', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     'elementId': '@', 
     'displayName': '@', 
    }, 
    transclude: true, 
    template: '<div class="my-div" id="{{elementId}}">{{displayName}}<div ng-transclude></div></div>' 
} 

})

Проблема заключается в том, если я сразу делать вещи при запуске, как и инициализация других директив, эти значения (например, elementId) еще не интерполированы.

Другими словами, если я получаю ссылку на элемент myDiv и распечатываю свой идентификатор, сразу при запуске печатается «{{elementId}}». Но если я подожду короткое время (скажем, одну секунду), то значение, которое было передано как значение атрибуту element-id, напечатано (как и ожидалось).

Если вы откроете консоль во время просмотра скрипта, вы увидите это.

Что я здесь делаю неправильно? Как я могу избежать этого (кроме многих действительно уродливых тайм-аутов при запуске)?

Answer 1

У вас есть несколько неправильных вещей. Вот новая скрипка, в которой вы можете увидеть журнал «сначала», указав правильное значение: http://jsfiddle.net/0mq2xv8m/

1) Вы должны включить внутренний элемент в шаблон второго. У вас есть transclude set to true, поэтому он заменит ваш узел. Это также гарантирует, что вторая директива не будет связываться до того, как первая будет готова. То есть так как он находится в DOM вместе с директивой outter, он может не выполнять действия с директивой об упаковке.

template: '<div class="my-div" id="elementId">{{displayName}}<div my-field></div></div>' 

2) делать id="elementId" вместо id="{{elementId}}" пройти по ссылке, а значения

3), как правило, это плохая практика ловить атрибуты родителя, то лучше пройти его с обязательным 2-полосным , Это справедливо для любого ориентированного на список программирования, с которым я работал.

Good Practice:

Вы должны использовать контроллер или функции связи для любых "INIT" шагов. Они не будут выполняться до тех пор, пока директива не свяжет все свои атрибуты/область. То, как вы это делаете, выполняется во время этапа оценки при создании $ scope (пока еще нет области). Функции связи и контроллеры ждут появления $ scope. Вместо функции связи можно использовать контроллер (я думаю, что это более ясный и простой для модульного теста).

angular.module('App').controller('someController',[], function() { 
     var controller = { 
      init:function(){ 
       console.log(elementId); 
      } 
     } 
     controller.init(); 
     return controller; 
}); 


myApp.directive('myDiv', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    controller:'someController', 
    scope: { 
     'elementId': '@', 
     'displayName': '@', 
    }, 
    transclude: true, 
    template: '<div class="my-div" id="{{elementId}}">{{displayName}}<div ng-transclude></div></div>' 
}