Изменение атрибута элемента атрибута Angular динамически

Я пытаюсь создать настраиваемую директиву, которая расширяет функциональность существующего элемента. Я хотел бы определить, существует ли определенный атрибут, а если нет, то добавьте его (например, ng-class).

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

I создал плункер с помощью простого примера с помощью ng-hide.

<input hide type="submit" value="Submit"/>

    app.directive('hide', function() {
      return {
        restrict: 'A',
        compile: function(){
             return {
                 pre: function(scope, element, attributes, controller, transcludeFn){
                   attributes.$set("ng-hide", true);
                 },
                 post: function(scope, element, attributes, controller, transcludeFn){

                 }
             }
         },
      };
    });

Если я добавлю ng-hide = "true" в html, кнопка отправки будет скрыта правильно. Если я оставлю его в директиве, то я вижу, что DOM правильно настроил элемент, но элемент не скрыт:

<input hide="" type="submit" value="Submit" ng-hide="true">

Любая помощь оценивается!

Ответы

Ответ 1

Вы можете сделать это в функции связывания

  • Установка приоритета директивы высокой, поэтому она запускается перед всеми остальными.
  • Установите его на терминал, чтобы другие не запускались после него.
  • Перекомпилируйте элемент после внесения в него изменений (например, добавление атрибутов)

Например:

app.directive('hide', function($compile) {
  return {
    restrict: 'A',
    priority: 10000,
    terminal: true,
    link: function(scope, element, attrs) {
      attrs.$set('ngHide', true);
      attrs.$set('hide', null);
      $compile(element)(scope);
   }
  };
});

Как видно на http://plnkr.co/edit/tHNvCxVn2wURO38UtI0n?p=preview