javascript - AngularJS attribute directive. How to add another attribute directive on 'compile' -

i create attribute directive add icon on button when it's disabled.

like fiddle

however, add ng-disabled directive on compile (with same disabled-button value)

what best way ?

if add attribute ng-disabled on compile function, never compile. so, if re-compile element on link function, have remove ng-tranclude directive due error. more, events, ng-click, triggered twice.

bonus question: possible restrict attribute directive html elements <a> or <button> ?

thx

i'm afraid cannot add directives dynamically element contains directive. reason compile function called after angular has processed directive's element , determined directives attached it. adding attribute @ point late, discovery has taken place.

there may ways don't know of (and interested in seeing stable, non-hackish one).

i can suggest alternative may suit you: manually place ng-disabled on button, brevity , consistency let expression of ng-disabled drive directive, i.e.:

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

directive code:

.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;                 }             );         }     }; }) 

fiddle: http://jsfiddle.net/3orwupo5/1/

---

or can manually set disabled property of button: http://jsfiddle.net/y5ezvj5l/