从指令内部访问插值

Question

我有以下简单指令：

angular.module('MyApp').directive('readonlyList', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'list.html',
        scope: {
            selectedNumber: '=',
            numbers: '='
        },
        link: function (scope, element, attributes) {
            scope.$watch('numbers', function() {

                for(var i=0; i < $(element).children().length; i++) {
                    console.log("list entry text: " + $(element).children().eq(i).text());
                }
            });
        }
    };
});

使用以下模板：

<ul class="no-bullet phone-list scrollable">
    <li ng-repeat="number in numbers">{{number}}</li>
</ul>

然而，运行代码我得到以下内容：

{{数}}

{{数}}

{{数}}

我尝试在for循环之前编译代码：

$compile(element.contents())(scope);

在我的列表中生成多个重复项。

我正在使用角度1.3 ......

我在这里有点失落，任何帮助都会受到赞赏！

Answer 1

监视块在与Angular ngRepeat渲染相同的摘要循环中执行，因此Angular尚未处理项目。

可能最简单的方法是在下一个摘要周期中运行$watch代码。您可以使用$timeout服务来实现它：

scope.$watch('numbers', function(newVal, oldVal) {
    $timeout(function() {
        for (var i = 0; i < $(element).children().length; i++) {
            console.log("list entry text: " + $(element).children().eq(i).text());
        }
    });
});

演示：http://plnkr.co/edit/LRWogLk6IRw5TCHB8bp1?p=preview