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

Question

I'm creating a form wizard with AngularJS.

Think of each fieldset like so:

<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've done is, in my controller found the current fieldset and the next fieldset like so:

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

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

Down to my main question... Inside of one of the fieldsets I have some li elements, and if certain elements are clicked, I want to trigger a click on the NEXT button automatically.

I tried adding an 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's 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 the button, I got the error:

Error: $rootScope:inprog Action Already In Progress

So I'm wanting to reach to jQuery, but I'm sure there's an angular way of doing this.

@RameshRajendran I removed it after getting the noted error, but it'll be back in my example in about 10 seconds after this comment :) — user1447679, Apr 27 '15 at 16:52
I did find some answers related to that error "inprog" but that led me to question whether I should be handling things differently. — user1447679, Apr 27 '15 at 16:56

score 9 · Accepted Answer · edited May 23 '17 at 12:08

9

You have to break out of the current $apply() cycle. One way to do this is using $timeout() (See why)

Try this:

<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);
}

edited May 23 '17 at 12:08

Community

1
1

answered Apr 27 '15 at 16:40

jbigman

1,200
11
24

That works, and I found this solution in related answers to that error. I think my hangup is, is that really the best way to handle it? It has a feeling of (hacky) to me, not that it is... Just want to be sure that I'm doing things right. – user1447679 Apr 27 '15 at 16:58
It didn't, but going to move forward with using angular's $setTimeout as I learn. Thanks for your help :) – user1447679 Apr 27 '15 at 17:07
Found out it seems to be the Angular solution http://stackoverflow.com/a/18996042/2988788 – jbigman Apr 27 '15 at 17:08
Haha. I was reading that just now too. It just feels...wrong. Apparently it's not wrong. :) – user1447679 Apr 27 '15 at 17:10

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

1 Answers1