AngularJS屬性指令。 如何在“編譯”中添加另一個屬性指令

Question

我想創建一個屬性指令，該指令在禁用時在按鈕上添加一個圖標。

像這個小提琴

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

什么是最好的方法 ？

如果我在編譯函數中添加了ng-disabled屬性，則它永遠不會編譯。 因此，如果我重新編譯link函數上的元素，由於錯誤，我必須刪除ng-tranclude指令。 另外，我的事件（如ng-click ）被觸發兩次。

額外的問題：是否可以將我的attribute指令限制為<a>或<button>類的html元素？

謝謝

Answer 1

恐怕您無法將指令動態添加到包含指令的元素中。 原因是您的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/