等待DOM在AngularJS指令上准备就绪

Question

我正在为我的角度网站建立一个"导游".

我环顾四周寻找选择,Intro.js看起来最合适.它已经准备好了一个Angular指令和所有东西:Angular Intro.js.

一切都按预期工作,直到我必须添加一个步骤到第一个(并且只有第一个)由ng-repeat绑定注入的DOM对象.我给所有ng-repeat项目一个唯一的ID(通过$ index),但Intro.js没有承认它.

我猜Intro试图通过指定的ID找到DIV,但由于ng-repeat尚未完成,因此该名称没有DIV.

我做了一个plunker,你可以看到它正在处理静态内容但却无法知道ng-repeat中的对象.

相关代码:

HTML:

<!-- Works -->
<div id="static">This is static content.</div>

<!-- Doesnt work -->
<div id="item{{$index}}" ng-repeat="item in items">
    {{ item.name }}
</div>

角度控制器:

  $scope.IntroOptions = {
        steps:[
        {
            element: document.querySelector('#static'),
            intro: "This is static content"
        },
        {
            /** ID "item0" belongs to the first element on the ng-repeat **/
            element: document.querySelector('#item0'),
            intro: "Doesnt work!"
        }
        ],
        showStepNumbers: false,
        exitOnOverlayClick: true,
        exitOnEsc:true,
        nextLabel: '<strong>NEXT!</strong>',
        prevLabel: '<span style="color:green">Previous</span>',
        skipLabel: 'Exit',
        doneLabel: 'Thanks'
    };

Plunker:http://plnkr.co/edit/kE8P5Kq2Y5CVWEYgyBIo?p=preview

• 假设上面的原因是这不起作用的原因,我如何使指令等待DOM"准备好"？

• 如果我的假设是错误的,为什么它不起作用呢？

Answer 1

我首先尝试的最无能的方法是包装动态内容：

<div id="dynamic">
    <div id="item{{$index}}" ng-repeat="item in items">
        {{ item.name }}
    </div>
</div>

作用域变量就变成了

$scope.IntroOptions = {
    steps:[
    {
        element: document.querySelector('#static'),
        intro: "This is static content"
    },
    {
        element: document.querySelector('#dynamic'),
        intro: "This is dynamic content"
    }
    ],
// ... cut ...

看起来您的原始代码陷入了僵局：视图取决于数据（$scope.items），而数据又取决于视图（IntroOptions）