javascript – Angular：使用绑定向元素添加属性(以编程方式)

2019年7月21日 163次阅读

我有这个属性指令,在特定条件下需要添加一个属性.但这不是全部,我还想将此属性的值绑定到$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.所以问题是：如何以编程方式设置绑定？

最佳答案 一种方法是将属性添加到指令中,然后再次编译指令属性.但是,技巧是在$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);
    }
});
点赞