Javascript 等待DOM在AngularJS指令上就绪

我正在为我的网站建立一个“导游”

我四处寻找选择，似乎是最合适的。它已经准备好了一个角度指令，所有的东西都是：

一切都按预期进行，直到我必须首先（并且只有第一个）向ng repeat绑定注入的DOM对象添加一个步骤。我给了所有ng repeat items一个唯一的ID（通过$index），但Intro.js就是无法确认

我猜Intro正在尝试通过指定的ID查找DIV，但是由于ng repeat尚未完成，因此没有使用该名称的DIV

我制作了一个plunker，您可以看到它正在处理静态内容，但无法确认ng repeat中的对象

相关代码：

HTML:

这是静态内容。
{{item.name}

角度控制器：

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

$scope.IntroOptions={
步骤：[
{
元素：document.querySelector（“#static”），
简介：“这是静态内容”
},
{
/**ID“item0”属于ng repeat上的第一个元素**/
元素：document.querySelector（“#item0”），
简介：“不行！”
}
],
showstepNumber:false，
ExitonOverlyClick：对，
是的，
下一个标签：“下一个！”，
prevLabel:“上一个”，
skipLabel:“退出”，
唐纳贝尔：“谢谢”
};

Plunker：

• 假设上面的原因就是这不起作用的原因，我该怎么做 让指令等待DOM“就绪”吗

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

---

首先，我尝试的最愚蠢的方法是包装动态内容：

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

---

您的原始代码似乎处于死锁状态：视图取决于数据（$scope.items），而数据（$scope.items）取决于视图（IntroOptions）

您可以观察$rootScope将广播的$viewContentLoaded事件

我知道这已经很古老了，但是如果有人偶然发现了这个答案，最好的办法是使用a，它在需要访问该属性时会得到评估：

$scope.IntroOptions = {
    steps:[
    {
        element: document.querySelector('#static'),
        intro: "This is static content"
    },
    {
        /** ID "item0" belongs to the first element on the ng-repeat **/
        get element(){return 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'
};

$scope.IntroOptions={
步骤：[
{
元素：document.querySelector（“#static”），
简介：“这是静态内容”
},
{
/**ID“item0”属于ng repeat上的第一个元素**/
get元素（）{return document.querySelector（'#item0'）}，
简介：“不行！”
}
],
showstepNumber:false，
ExitonOverlyClick：对，
是的，
下一个标签：“下一个！”，
prevLabel:“上一个”，
skipLabel:“退出”，
唐纳贝尔：“谢谢”
};

按照如下方式使用此指令：

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

---

始终在问题中发布相关代码，不要只是链接。链接。

文档。querySelector是控制器中的脏代码。创建一个指令来操作DOM。这只会突出显示所有项周围的DIV。我只想强调第一点。我意识到我在这个问题上没有说清楚，很抱歉。我编辑它是为了澄清这一点。好的，现在我明白了。我会再把代码弄乱一些。
$scope.IntroOptions = {
    steps:[
    {
        element: document.querySelector('#static'),
        intro: "This is static content"
    },
    {
        /** ID "item0" belongs to the first element on the ng-repeat **/
        get element(){return 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'
};

.directive('onLastRepeat', function() {
    return function(scope, element, attrs) {
        if (scope.$last) setTimeout(function(){
            scope.$emit('onRepeatLast', element, attrs);
        }, 50);
};});

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

$scope.$on('onRepeatLast', function (eve, elem) {
//call intro
});