angularjs – 在后链接中更新范围变量时,指令视图不会更新

2019年8月6日 272次阅读

在post link函数中更新范围变量时,我无法更新视图.

以下是我的指令的使用.

    <my-directive color='purple'>
    </my-directive>

以下是我的指令的定义.

app.directive('myDirective', function () {
    console.log('My Directive Called');
    return {
        restrict: 'E',
        scope: {
            localVar: '@color'
        },
        //template: '<span></span>', // When I enable this template it works fine.
        /* This link way it is working fine.
        link: function (scope, iElement, iAttrs) {
            console.log(iElement);
            iAttrs.color = 'red';
        }*/
        //This is not working Reason don't know.
        compile: function (tElement, tAttrs) {
            var spanElem = angular.element('<span> {{ localVar }} </span>');
            spanElem.attr('color', tAttrs.color);

            tElement.replaceWith(spanElem);

            return function (scope, iElement, iAttrs) {
                iAttrs.color = 'red';
            };
        } 
    };
});

我想知道这段代码无效的原因.如果我在指令定义对象中指定模板属性,它将起作用.但我想知道上面的代码出了什么问题.
请帮我.

最佳答案 如果你做这样的事情会很容易：

JSFiddle

angular.module('myApp', [])
.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
            localVar: '@color'
        },
        template: '<span> {{ localVar }} </span>'
    };
});
点赞