The page consists of two blocks: a list of all elements and the creation of a new element. Creating a new made using jquery.steps. It worked well. Further added angular and ng-switch directive. Angular earned, stopped working steps. The strangeness is that if you make the form the default choice (in the selection = 'new' script), then the steps starts to work, and if human, first the list, and by pressing the new button - it breaks.

<input type="hidden" ng-model="selection" /> <div ng-switch on="selection"> <div class="new" ng-switch-when="new"> <form id="formwizard"> <!--тут форма--> </form> </div> <div class="all" ng-switch-when="all"> <!--тут список--> </div> </div> <script> $(function () { var form = $('#formwizard').show(); form.steps({ headerTag: 'h3', bodyTag: 'fieldset', transitionEffect: 'slideLeft' }); }); var testApp = angular.module('testApp'); testApp.controller('testController', function ($scope) { $scope.items = ['all', 'new']; $scope.selected = $scope.items[0]; $scope.createNew = function () { $scope.selected = $scope.items[1]; } $scope.showAll = function () { $scope.selected = $scope.items[0]; } }); </script>
  • because you don’t need to use both at the same time - Grundy
  • @Grundy why? with plug-ins is better than without plug - ins - Sergey Tambovites
  • as you can see, it doesn’t work with plugins :) so it’s definitely not better ;-) - Grundy

1 answer 1

ng-switch as well as ng-if - completely remove the elements from the markup, so the form element on which you initialize the plugin you then appear before the form.steps call form.steps , in this case everything works before switching the switch, it does not appear, In this case, nothing works.

There may be several solutions:

  1. opt out of a separate jQuery plugin and find an analogue in angular
  2. place the plugin's call into a separate directive and track changes in it to reinitialize the plugin
  3. in the controller itself, reinitialize the plugin with a delay so that the necessary element is drawn in the view (the worst option)
  4. Stop using ng-if / switch and replace them with ng-show / hide, since these directives only change style: display, but do not remove the element from the markup.
  5. If you make a directive for the form tag, then you don’t need to track anything, since the link function will be called each time an element is added.

Example directive:

 .directive('formSteps',function(){ return { link: function(scope,elem){ elem.steps({ headerTag: 'h3', bodyTag: 'fieldset', transitionEffect: 'slideLeft' }); } } })

The markup will look like this:

 <form id="formwizard" form-steps>

And in the code part

 $(function () { var form = $('#formwizard').show(); form.steps({ headerTag: 'h3', bodyTag: 'fieldset', transitionEffect: 'slideLeft' }); });

no longer needed.

  • Is there any example of how to implement the second scenario? - Sergey Tambovtsev
  • @ sergeitambovtsev, better for the first search. make a minimal reproducible example so that you can run - Grundy
  • It is not necessary to track changes and re-initialize the plugin in this simple case :) It is enough to simply call the plugin in the constructor directive and not use ng-if / switch inside the form. - Pavel Mayorov
  • @PavelMayorov, this is the fourth option, is actually to abandon ng-if / switch and replace with ng-show / hide :) - Grundy
  • one
    I do not understand what the problem is to give an example of a code with a directive calling steps for the form element, for this you need to throw links to the documentation and a bunch of ponts? - Sergey Tambovtsev