Директива атрибута AngularJS. Как добавить еще одну директиву атрибута 'compile'

93
7

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

Как эта скрипка

Однако я бы также добавил директиву ng-disabled для compile (с тем же значением disabled-button с disabled-button)

Каков наилучший способ?

Если я добавлю атрибут ng-disabled в функцию компиляции, он никогда не будет компилироваться. Итак, если я перекомпилирую свой элемент в функции link, мне нужно удалить директиву ng-tranclude из-за ошибки. Более того, мои события, такие как ng-click, запускаются дважды.

Бонусный вопрос: возможно ли ограничить директиву атрибута html элементами типа <a> или <button>?

Спасибо

спросил(а) 2020-04-04T02:35:26+03:00 3 месяца назад
1
Решение
68

Боюсь, вы не можете добавлять директивы динамически к элементу, который содержит вашу директиву. Причина в том, что ваша функция compile будет вызвана после того, как Angular обработает элемент директивы и определит, к чему привязаны директивы. Добавление другого атрибута на этом этапе слишком поздно, обнаружение уже произошло.

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

Я могу предложить альтернативу, которая может вам подойдет: вручную поместите ng-disabled на кнопку, но для краткости и согласованности пусть выражение ng-disabled вашу директиву, то есть:

<button ng-click="ctrl.click()" ng-disabled="ctrl.disabled" disabled-button>

Код директивы:

.directive('disabledButton', function($parse) {
return {
restrict: 'A',
transclude: true,
scope: {
},
template: '<span ng-show="disabled">X</span><span ng-transclude></span>',
link: function (scope, elem, attrs) {
var disabled = $parse(attrs.ngDisabled);
scope.disabled = false;
scope.$watch(
function() {
return disabled(scope.$parent);
},
function(newval) {
scope.disabled = newval;
}
);
}
};
})

Сценарий: http://jsfiddle.net/3orwupo5/1/

Или вы можете вручную установить disabled свойство кнопки: http://jsfiddle.net/y5ezvj5L/

ответил(а) 2020-04-04T02:47:51.201593+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема