AngularJS - добавление директивы динамически к элементу

Question

Я создал директиву, проверить, если данные были введены в качестве HTML-элемента следующим образом:

var myApp = angular.module('myApp', []); 

myApp.directive("uiRequired", function() { 
return function (scope, elem, attrs) { 
    elem.bind("blur", function() { 
     var $errorElm = $('#error_testReq'); 
     $errorElm.empty(); 
     if (angular.isDefined(attrs) && angular.isDefined(attrs.uiRequired) && attrs.uiRequired == "true" && elem.val() == "") { 
      $errorElm.append("<li>Field value is required.</li>"); 
      $errorElm.toggleClass('nfx-hide', false); 
      $errorElm.toggleClass('nfx-block', true); 
     } 
     else 
     { 
      $errorElm.toggleClass('nfx-hide', true); 
      $errorElm.toggleClass('nfx-block', false); 
     } 
    }); 
}; 

});

Рабочий пример можно увидеть here

Мой вопрос: Есть ли способ добавить директиву (uiRequired) я создал динамически элементов на экране в документе готов.

Я хочу поместить новую директиву на отдельные элементы HTML в соответствии с предопределенным списком, который у меня есть. Я не могу заранее знать, в какой области эта директива должна быть включена.

Так что я должен положить его во время рендеринга страницы.

Я попытался поставить его динамически сам во время загрузки страницы, однако AngularJS интерпретировал его.

Я не мог найти пример в Интернете, который делает это.

Может ли кто-нибудь мне помочь?

Answer 1

Вы можете динамически добавлять директивы на страницу во время фазы компиляции, когда Angular выполняет DOM и сопоставляет элементы с директивами. Каждый шаг процесса компиляции может преобразовать дерево DOM впереди, но вы никогда не должны изменять элементы, которые уже скомпилированы Angular. Этот момент важно помнить, потому что добавление директив в уже прошедшие элементы не будет иметь никакого эффекта. Конечно, есть способы обойти это. Например, вы можете перекомпилировать и повторно связать ранее перемещенные элементы. Однако я настоятельно рекомендую это, так как это может привести к непреднамеренным побочным эффектам, таким как утечка памяти и медленная производительность.

Чтобы динамически добавить директивы uiRequired, вы можете создать родительскую директиву - назовем ее uiRequiredApplier.

app.directive('uiRequiredApplier', function($scope) { 
     return { 
      restrict: 'A', 
      compile: function(element, attr) { 
       // you can apply complex logic figure out which elements 
       // you want to add the uiRequired attribute to 
       $('input', element).attr('uiRequired',''); 
       return function(scope, element, attr) { 
       } 
      } 
     } 
}); 

Вы можете применить атрибут следующим образом:

<div ui-required-applier> 
    <input type="text" ng-model="name" /> 
</div> 

Когда uiRequiredApplier собран, он будет динамически добавлять uiRequired атрибуты выбранных элементов с помощью JQuery, которые не были составленным еще. И когда Angular проходит DOM, в конечном итоге он скомпилирует и свяжет атрибуты uiRequired, которые добавят желаемое поведение проверки.