javascript - Angular : Add attribute (programmatically) to element with binding

Question

我有这个属性指令，在特定条件下需要添加一个属性。但这还不是全部，我还想将此属性的值绑定(bind)到 $scope 上的一个属性。在代码中(简化)这看起来像

...
.directive('do-magic', function ($timeout) {
    restrict: 'A',
    link: function (scope, element) {
        scope.isMagicDone = false;
        element.attr('is-magic-done', scope.isMagicDone);

        $timeout(function () {
            scope.isMagicDone = true;
        });
    }
});

因此，在 $timeout 执行后，我需要 is-magic-done 值为 true。所以问题是:如何以编程方式设置绑定(bind)？

Answer 1

一种方法是将属性添加到指令中，然后再次$compile指令属性。然而，诀窍是删除 $compile 之前的指令元素；否则你将有一个无限的编译循环。

结果是调用仅使用元素属性进行编译。请注意，指令本身不会再次编译。这是一个例子:

.directive('do-magic', function ($timeout, $compile) {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.isMagicDone = false;
        attrs.$set('is-magic-done', '{{isMagicDone}}');

        $timeout(function () {
            scope.isMagicDone = true;
        });

        element.removeAttr('do-magic');
        $compile(element)(scope);
    }
});