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.

Tamberg

where is the fs.TriggerClick function in your controller? – Sadonia

@RameshRajendran I removed it after getting the noted error, but it'll be back in my example in about 10 seconds after this comment :) – Tamberg

I did find some answers related to that error "inprog" but that led me to question whether I should be handling things differently. – Tamberg

Answer 1

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

Dugong

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. – Tamberg

It didn't, but going to move forward with using angular's $setTimeout as I learn. Thanks for your help :) – Tamberg

Found out it seems to be the Angular solution https://mcmap.net/q/53562/-angularjs-prevent-error-digest-already-in-progress-when-calling-scope-apply – Dugong

Haha. I was reading that just now too. It just feels...wrong. Apparently it's not wrong. :) – Tamberg