Solved (Punkler updated):
I used ng-include with autoload:
http://plnkr.co/edit/6p1dVln2R9Pgb9ivoMcX?p=preview
The code:
<!-- 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>
With ng-if, you can load the contents of the tabs on-demand, ie you can use a method jQuery Steps called getCurrentIndex to obtain the current index. <Methods>
Using autoload replaces the method onContentLoaded jQuery Steps asynchronous charging. <Events>
put all the code inside the tag Section, example: http://plnkr.co/edit/P09CFIoSp2G98LxJLZPn?p=preview
– novic
You can’t do it like that. All the HTML code would weigh too much the browser and the solution is to do async precisely to avoid excessive data loading and as the user passes through the Wizard the Plugin would remove the previous tab. It is a giant Quiz that sends all the answers to a script. You need to divide it into parts the load.
– Slowaways
The way it is in the link of your question the code doesn’t matter if it is loaded later, it will always be loaded in full, strange you say that. The way it is, you really have to do an angle gambit to catch this element. You have to see if there’s something you’ve done to.
– novic