I have a problem that after loading HTML content dynamically asynchronously with the jQuery Steps plugin:
/ p>
<section data-mode="async" data-url="test.html"></section>
AngularJS does not detect the content and thus all elements that contain the ng-show directives are displayed instead of being hidden as expected.
Fixed (Updated Punkler):
I've used ng-include with autoload :
link
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 contents of on-demand tabs, that is, you can use a jQuery Steps method called getCurrentIndex to get the current index. < Methods >
autoload overrides the onContentLoaded method of jQuery Steps asynchronous loading. < Events >