Динамически добавлять и удалять директивы из элемента

Question

У меня есть один элемент выбора и один элемент ввода. В зависимости от выбранного параметра мне нужно добавить или удалить директивы из входного текстового элемента.

Возможно ли это сделать в определенной функции, например, при изменении ng в элементе выбора, например: ng-change = changeInputValidation()?

И если возможно, как это сделать?

Answer 1

Один из способов сделать это что-то вроде этого внутри новой директивы:

HTML:

<div ng-app="app"> 
    <div id="abc" blue-text>Abc</div> 
    <br/> 
    <button remove-blue-text="abc">Remove Directive</button> 
</div> 

JS:

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

app.directive('blueText', function() { 
    return { 
     link: function (scope, elem, attrs) { 
      elem.css('background', 'blue'); 
     } 
    }; 
}); 

app.directive('removeBlueText', function ($compile) { 
    return { 
     scope: { 
      idToRemove: "@removeBlueText" 
     }, 
     link: function (scope, elem, attrs) { 
      elem.on('click', function() { 
       var elem = angular.element(document.getElementById(scope.idToRemove)); 
       var newHtml = '<div id="abc">Abc</div>'; 
       $compile(newHtml)(scope, function (el) { 
        elem.replaceWith(el); 
       }); 
      }); 
     } 
    }; 
}); 

JSFIDDLE.