Javascript 角度ngInclude$on（$includeContentLoaded）在加载所有内容之前触发

我使用Angular ngInclude包含一个部分HTML，其中包含一组嵌入的JqueryUI手风琴

        <div ng-controller="startLessonController as slCtrl">
        <div class="accordionLevel">
            <div ng-repeat="level in course.level" >
              <h2> {{level.number}} - {{level.name}}: {{level.title}}</h2>
                <div >
                    <span ng-bind-html="level.description"></span>
                    <div class="accordionLesson" ng-include=" 'LessonMenuTemplate.html'  ">
                    </div>
                </div>
            </div>
        </div>
    </div>

    $scope.$on('$includeContentLoaded', function () {
    $( ".accordionLevel" ).accordion({
        header: "h2",
        collapsible: true,
        active:false,
        heightStyle:"content"
    });
    setTimeout(function () {
        $( ".accordionLesson" ).accordion({
            collapsible: true,
            header: "h3",
            active:false,
            heightStyle:"content"
        });
        $( ".accordionPath" ).accordion({
            collapsible: true,
            header: "h4",
            active:false,
            heightStyle:"content"
        });
    }, 100);
});

上述作品适合第一个手风琴级别（不包括ng）。但是，在$includeContentLoaded启动时，在包含的HTML区域内的两个子accordion初始化不在DOM中

我已经解决了这个问题，在初始化内部手风琴之前加入了一个带有延迟的setTimeout（）

        <div ng-controller="startLessonController as slCtrl">
        <div class="accordionLevel">
            <div ng-repeat="level in course.level" >
              <h2> {{level.number}} - {{level.name}}: {{level.title}}</h2>
                <div >
                    <span ng-bind-html="level.description"></span>
                    <div class="accordionLesson" ng-include=" 'LessonMenuTemplate.html'  ">
                    </div>
                </div>
            </div>
        </div>
    </div>

    $scope.$on('$includeContentLoaded', function () {
    $( ".accordionLevel" ).accordion({
        header: "h2",
        collapsible: true,
        active:false,
        heightStyle:"content"
    });
    setTimeout(function () {
        $( ".accordionLesson" ).accordion({
            collapsible: true,
            header: "h3",
            active:false,
            heightStyle:"content"
        });
        $( ".accordionPath" ).accordion({
            collapsible: true,
            header: "h4",
            active:false,
            heightStyle:"content"
        });
    }, 100);
});

我担心的是网络延迟可能会使上述操作失败，因为我的延迟只是猜测DOM何时完全更新。我可以测试$（.accordionPath）是否为空，并在另一次延迟后重试，但由于元素多次出现，我不知道它是否部分加载

---

有更好的地方放我的手风琴初始化逻辑吗

这可能不是“角度”设计实践中的最佳答案，但是，面对同样的问题，我已通过以下方式“解决”了它：

创建一个小指令并将其限制为“a”（属性）。然后，将attribute指令添加到accordion

——您可以将其嵌入部分html或任何其他通过$compile运行的动态html代码中。我的意思是：

app.directive('myAccordionInit', function()
{
    var vDefinition =
    {
        restrict: 'A',
        link: function (scope, element, attrs)
        {
            setTimeout(function ()
            {
                element.accordion(
                {
                    collapsible: true,
                    header: h3,
                    active: false,
                    heightStyle: "content"
                });
            }, 100);
        }
    };
    return vDefinition;
});

超时仍然是必要的预防措施

似乎发生的事情是，在处理“Attribute”指令时，动态DOM基本上已经构建好了，您的“Attribute”就要启动了。您现在将代码附加到“element”而不是类，Angular将向您传递一个有效的元素。因此，即使有很多网络延迟，您的执行也会随之延迟

顺便说一句，这种方法的另一个好处是，您可以将手风琴初始化放入

的其他属性中，即

，然后修改指令以使用它们：

希望这有帮助

---

Roman

您不应该将dom修改代码直接放在控制器中，这就是指令的作用。如果您制定了自己的指令，那么在该指令中，您可以知道何时加载了该特定元素，然后执行init调用如何计算发出

$includecontentload

的次数？