Question

在后期链接功能中更新范围变量时，我无法更新视图。

以下是我的指令的使用。

    <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';
            };
        } 
    };
});

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

Answer 1

如果你这样做的话，这很容易：

JSFiddle

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

Answer 2

在不调用链接函数的情况下，编译函数和范围创建的模板之间没有双向数据绑定。

这就是为什么当你打开链接功能时，你会得到所需的结果。

来自angular docs。请阅读这一点。

HTML编译分三个阶段进行：

$ compile遍历DOM并匹配指令。

如果编译器发现元素与指令匹配，则该指令将添加到与DOM元素匹配的指令列表中。单个元素可以匹配多个指令。
一旦识别出与DOM元素匹配的所有指令，编译器就会按优先级对指令进行排序。

执行每个指令的编译功能。每个编译函数都有机会修改DOM。每个编译函数都返回一个链接函数。这些功能组成一个＆＃34;组合＆＃34; link函数，它调用每个指令的返回链接函数。
$ compile通过调用上一步中的组合链接函数将模板与作用域链接起来。这反过来将调用各个指令的链接函数，在元素上注册监听器，并在配置每个指令时使用作用域设置$ watch。

结果是范围和DOM之间的实时绑定。所以在这一点上，编译范围的模型更改将反映在DOM中。

编辑代码：

如果您想使用编译和链接功能，请尝试使用隔离范围

编辑代码2：

.directive('myDirective', function () {
    console.log('My Directive Called');
    return {
        restrict: 'E',
        scope: {
            localVar: '@color'
        },
        template : '<span> {{ localVar }} </span>'
    };
});

HTML：

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

编辑代码3：

directive('myDirective', function () {
    console.log('My Directive Called');
    return {
        restrict: 'EA', 
        template: '<span>{{ localVar }}</span>', // When I enable this template it works fine.

        compile: function (tElement, tAttrs) {
            return {
                post: function postLink(scope, iElement, iAttrs, controller) { 
                    scope.localVar = 'red';
                }
            }


        } 
    };
})

在帖子链接

2 个答案: