With angularjs, how can I trigger a click, or is there a better way?

Question

I am creating a form wizard using AngularJS.

Think of each field set as follows:

<div ng-controller="MyController as fs"> <fieldset> ... <button ng-click="fs.StepForward($event)">Next</button> </fieldset> <fieldset> ... <button ng-click="fs.StepBackward($event)">Previous</button> <button ng-click="fs.StepForward($event)">Next</button> </fieldset> </div> 

What I did in my controller found the current set of fields and the following set of fields like this:

 app.controller("MyController", function() { var ft = this; ft.StepForward = function(event) { // It here that I need to find the fieldset ft.current_fs = event.currentTarget.parentNode; ft.next_fs = event.currentTarget.parentNode.nextElementSibling; } }); 

So, firstly, I'm not sure if this is the best way to do this, but it works.

According to my main question ... Inside one of the fields there are several li elements, and if some elements are clicked, I want to automatically click on the NEXT button.

I tried adding ng-click :

 <fieldset> <ul> <li><a ng-click="fs.TriggerClick($event)">Some Itme</a></li> </ul> <button id="MyButtonTest" ng-click="fs.StepForward($event)">Next</button> </fieldset> app.controller("MyController", function() { var ft = this; ft.StepForward = function(event) { // It here that I need to find the fieldset ft.current_fs = event.currentTarget.parentNode; ft.next_fs = event.currentTarget.parentNode.nextElementSibling; } ft.TriggerClick = function(event) { angular.element('#MyButtonTest').trigger('click'); } }); 

But when I created a function to trigger a click on a button, I got an error:

 Error: $rootScope:inprog Action Already In Progress 

So, I want to get to jQuery, but I'm sure there is an angular way to do this.

Answer 1

You should exit the current $ apply () loop. One way to do this is to use $ timeout () ( See why )

Try the following:

 <fieldset> <ul> <li><a ng-click="triggerClick()">Some Item</a></li> </ul> <button id="MyButtonTest" ng-click="fs.StepForward($event)">Next</button> </fieldset> 

controller

 $scope.triggerClick = function(){ $timeout(function() { angular.element('#MyButtonTest').triggerHandler('click'); }, 0); }