AngularJS jQueryのステップ（プラグイン）私は<a href="http://www.jquery-steps.com/Examples#async" rel="nofollow noreferrer">jQuery Steps</a>プラグインを使用して動的に非同期でHTMLコンテンツをロードした後という問題を抱えている

Question

非同期コンテンツの読み込みと1.6：

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

がAngularJSは、コンテンツので、すべての要素を検出しません期待どおりに非表示にする代わりに、ng-showディレクティブが含まれています。 編集 - - 問題と

Punkler解決（Punkler更新）：

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

PS：私はロードする必要がHTMLデータの量があるので、私は非同期に負荷を必要とします過剰。

Answer 1

あなたはangularjs

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

で動的なテンプレートのロードにng-includeを使用する必要があると私はそれ見える

作業Plunker

Answer 2

が解決を参照してくださいにするためにtest.htmlからng-showを削除した - （Punkler更新日）

私は onloadで ng-includeを使用

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

：

ng-ifで

<!-- 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> 

、あなたはオンデマンドのタブのコンテンツをロードすることができ、つまり、あなたは現在を取得するためにgetCurrentIndexと呼ばれるjQueryのステップメソッドを使用することができますステップインデックス。 autoloadを使用して< Steps Methods>

は非同期コンテンツ負荷のonContentLoadedメソッドをオーバーライドします。 < Steps Events>