AngularJS属性指令。如何在＆＃39; compile＆＃39;上添加另一个属性指令

Question

我想创建一个属性指令，当它被禁用时，会在按钮上添加一个图标。

Like this Fiddle

但是，我还会在ng-disabled上添加compile指令（具有相同的disabled-button值）

最好的方法是什么？

如果我在编译函数上添加属性ng-disabled，它永远不会编译。 因此，如果我在link函数上重新编译我的元素，由于错误，我必须删除ng-tranclude指令。更多，我的活动，如ng-click，会被触发两次。

加分问题：是否可以将我的属性指令限制为<a>或<button>等html元素？

THX

Answer 1

我担心你无法动态地将指令添加到包含你的指令的元素。原因是在 Angular处理了指令的元素并确定指令附加到它之后，您的compile函数将被称为。此时添加另一个属性为时已晚，发现已经发生。

有些方法可以做到我不知道（并且我有兴趣看到任何稳定的，非黑客的）。

我可以建议一个可能适合你的替代方案：手动将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/