angularJS:等待在指令加载之前评估模板

Question

情况

假设我有一个指令,它必须通过ID在定义指令的元素内访问某些元素.可能出现的问题是,在评估指令时,子元素还没有.结果是,我无法通过其ID访问这些元素.

例

小提琴

<div ng-controller="MyCtrl">
  <div color="elementId">
      <div ng-repeat="item in items" id="{{ item.id }}">
          {{ item.name }}
      </div>
  </div>
</div>

<script>
    var myApp = angular.module('myApp',[]);

    myApp.directive("color", function () {
        return {
            restrict: "A",   
            link: function (scope, element, attributes) {

                var name = attributes.color,
                    el = element[0];

                scope.$watch(name, function () {
                    var id = scope[name];
                    console.log(id); //id1
                    console.log(element.children().eq(0).attr("id")); //{{ item.id }}
                    element.find("#"+id).css("background-color","red");
                });
            }        
        };
    });

    function MyCtrl($scope) {
        $scope.items = [
            { id:"id1", name:"item1" },
            { id:"id2", name:"item2" }
        ];

        $scope.elementId="id1";
    }

</script>

所以我的指令应该只绘制id为的元素的背景颜色$scope.elementId.(顺便说一句.我知道我可以更轻松地处理这个简单的例子,它应该只是说明一般问题).问题是,ng-repeat中的元素的id还没有.正如代码中的注释所指出的那样,id仍然是"{{item.id}}".因此,角度尚未评估此部分.

题

我现在明显的问题是:如何让我的指令等待后代元素被完全评估？

进一步解释

在我的实际应用程序中,我希望有一个指令,使我能够滚动到页面上的某些元素.我还使用分页指令来分割我想要显示的元素.由于分页,只有真正可见的元素在DOM中,因此隐形元素已经在我的控制器中被过滤掉了.

我还有一个侧边栏,其中有所有元素的小链接(不仅是可见元素).当有人点击侧边栏中的元素时,应该发生两个事件:

1. 跳转到正确的页面
2. 滚动到corrent元素

当我跳到页面时,我基本上都有这种情况,我在上面描述过.我有一个完整的新元素列表,必须由ng-repeat处理.但是在那之后,我尝试告诉我的scroll-directive,它应该使用ID"xy"滚动元素,但是这个ID还没有分配.

Answer 1

您应该完成该指令，包括一个controller选项。

controller: function ($scope){
     $scope.items = [
        { id:"id1", name:"item1" },
        { id:"id2", name:"item2" }
    ];
}

这将在控制器范围内创建所有内容，然后您可以从使用该指令的视图的控制器访问它。