angularjs - 角度指令属性已设置（或未设置）但存在于 setTimeout 中，时间为 0 秒

Question

我有这个小提琴

angular.module('mainApp', [])
    .directive('list', function factory() {
        return {
            restrict: 'E',
            scope: {
                size: '=',
                listWidth: '@'
            },
            replace: true,
            template: '<ul class="syn-list"><li ng-repeat="item in items">{{item}}</li></ul>',
            link: function(scope, element, attrs) {
                scope.items = ['item 1', 'item 2', 'item 3'];

                $('#p1').html(scope.size + ' - ' + attrs.size + ' :: ' + scope.listWidth + ' - ' + attrs.listWidth);

                setTimeout(function() {
                    $('#p2').html(scope.size + ' - ' + attrs.size + ' :: ' + scope.listWidth + ' - ' + attrs.listWidth);
                }, 0);
            }
        };
    });

为什么 scope.size 设置为预期值而 scope.listWidth 返回未定义？

为什么在 0 秒 scope.listWidth 的 setTimeout 调用中设置为预期值？

Answer 1

使用 @ 时会发生这种情况，因为在链接阶段尚未评估插值，因此此时该值设置为 undefined。当您添加 settimeout(0) 时会暂停，让浏览器有机会进行插值。当使用 = 没有插值时，您直接使用 $parse service avaialable in angular 来使用父范围属性，因此没有 setTimeout 就没有未定义。您不应该直接使用 scope.value 而是在所需属性上放置 $observe 属性