AngularJS 1.6 与 jQuery Steps（插件）异步内容加载答案

【问题标题】：AngularJS 1.6 with jQuery Steps (plugin) asynchronous content loadingAngularJS 1.6 与 jQuery Steps（插件）异步内容加载
【发布时间】：2017-03-25 14:32:17
【问题描述】：

我在使用jQuery Steps 插件动态异步加载 HTML 内容后遇到问题：

<section data-mode="async" data-url="test.html"></section>

AngularJS 不会检测到内容，因此包含ng-show 指令的所有元素都会显示，而不是按预期隐藏。

~~Punkler 有问题~~ - 编辑 - 已解决（Punkler 已更新）：

http://plnkr.co/edit/6p1dVln2R9Pgb9ivoMcX?p=preview

P.S.：我需要异步加载，因为我必须加载的 HTML 数据量过多。

【问题讨论】：

使用 Angular 或 jQuery。彻底摆脱 jQuery，这就是解决方案。
您不必摆脱 jQuery，但您必须使用 angular 进行异步加载，因为您需要确保 angular 在模板加载后运行。这是一篇建议您使用指令异步加载模板的解决方案的帖子。 stackoverflow.com/questions/21196245/…

标签： javascript jquery angularjs asynchronous

【解决方案1】：

angularjs中的动态模板加载需要使用ng-include

<section ng-include="'test.html'"></section>

我已经从test.html 中删除了ng-show 以使其可见

查看工作Plunker

【讨论】：

我必须加载的 HTML 数据过多。如何使用向导的下一步按钮然后按需加载？我必须在控制器中放入什么？

【解决方案2】：

已解决 -（Punkler 更新）

http://plnkr.co/edit/6p1dVln2R9Pgb9ivoMcX?p=preview

我使用ng-include 和onload：

<!-- Jquery Steps HTML Template -->
<div id="wizard" ng-controller="wizardCtrl">
  <h3><i class="fa fa-question-circle" aria-hidden="true"></i> Arroz</h3>
  <section>
    <div ng-if="index == '1'" ng-include="'test.html'" onload="finishLoading()"></div>
  </section>
</div>

<script>
  // Jquery Steps Plugin
  $wizard = $("#wizard");
  $wizard.steps({
    headerTag: "h3",
    bodyTag: "section",

    enableFinishButton: false,
    enablePagination: true,
    enableAllSteps: false,
    forceMoveForward: true,
    titleTemplate: "#title#",
    cssClass: "wizard tabcontrol",

    labels: {
      loading: ""
    }
  });

  angular.module('myApp', [])
    .controller('wizardCtrl', ['$scope', '$timeout', function($scope, $timeout){
        $scope.index = "1";

        $scope.finishLoading = function (){
            // jQuery Steps
            var index = $wizard.steps("getCurrentIndex");
            // ...

            return true;
        };
    }]);
</script>

使用ng-if可以按需加载标签的内容，即可以使用jQuery Steps方法getCurrentIndex获取当前步数索引。 Steps Methods>

使用autoload覆盖异步内容加载的onContentLoaded方法。 Steps Events>

【讨论】：