AngularJS 1.6 with jQuery Steps (plugin) asynchronous content loading

Question

I'm having a problem that after loading HTML content dynamically asynchronously with the jQuery Steps plugin:

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

The AngularJS does not detect the content and thus all elements that contain the ng-show directives are displayed instead of being hidden as expected.

~~Punkler with the problem~~ - Edit - Solved (Punkler updated):

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

P.S.: I need the load to be asynchronous because the amount of HTML data I have to load is excessive.

Either use Angular, or jQuery. Get rid of jQuery entirely, that's the solution. — Jeremy Thille
– Jeremy Thille, Commented Mar 25, 2017 at 14:34
You don't have to get rid of your jQuery but you have to use angular for the async loading because you need to make sure angular is run after the template is loaded. Here is a post that suggests one solution where you use directives to asynchronously load templates. stackoverflow.com/questions/21196245/… — Hadas Zeilberger
– Hadas Zeilberger, Commented Mar 25, 2017 at 14:39

Gaurav Kumar Singh · Accepted Answer · 2017-03-25 16:25:25Z

1

You need to use ng-include for dynamic template load in angularjs

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

and i've removed ng-show from test.html to make it visible

See working Plunker

answered Mar 25, 2017 at 16:25

Gaurav Kumar Singh

1,5703 gold badges11 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rodrigo Vieira Over a year ago

HTML data that I have to load is excessive. How to use the next button of the Wizard then to load on demand? What do I have to put inside the controller?

Rodrigo Vieira · Accepted Answer · 2017-03-26 14:58:39Z

Solved - (Punkler Updated)

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

I use ng-include with 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>

With ng-if, you can load the content of the tabs on-demand, that is, you can use the jQuery Steps method called getCurrentIndex to get the current steps index. <Steps Methods>

Using autoloadoverrides the onContentLoaded method of Async Content load. <Steps Events>

Collectives™ on Stack Overflow

AngularJS 1.6 with jQuery Steps (plugin) asynchronous content loading

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related