How to Trigger Ngclick Programmatically

How to trigger ngClick programmatically

The syntax is the following:

function clickOnUpload() {
  $timeout(function() {
    angular.element('#myselector').triggerHandler('click');
  });
};

// Using Angular Extend
angular.extend($scope, {
  clickOnUpload: clickOnUpload
});

// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;

More info on Angular Extend way here.

If you are using old versions of angular, you should use trigger instead of triggerHandler.

If you need to apply stop propagation you can use this method as follows:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>

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

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

How to trigger emulate click ngClick from jQuery

Nevermind the apply cycles and timeouts, here you are:

$('a').dispatchEvent(new MouseEvent('click', {
 'view': window,
 'bubbles': true,
 'cancelable': true
}));

How can I trigger the click event of another element in ng-click using angularjs?

If your input and button are siblings (and they are in your case OP):

<input id="upload"
    type="file"
    ng-file-select="onFileSelect($files)"
    style="display: none;">

<button type="button" uploadfile>Upload</button>

Use a directive to bind the click of your button to the file input like so:

app.directive('uploadfile', function () {
    return {
      restrict: 'A',
      link: function(scope, element) {

        element.bind('click', function(e) {
            angular.element(e.target).siblings('#upload').trigger('click');
        });
      }
    };
});

How to trigger 'click ' event in Angular js

Usually you don't submit a form in AngularJS. You send the data using an XHR and get a response in JSON.

Something like this:

VIEW

<form name="myForm" ng-submit="login(credentials)">

  <label>
    Username:
    <input type="text" ng-model="credentials.username" />
  </label>

  <label>
    Password:
    <input type="password" ng-model="credentials.password" />
  </label>

 <button type="submit">Login</button>

</form>

CONTROLLER

$scope.credentials = {};
$scope.login = function login(credentials) {
  var user = credentials.username;
  var pass = credentials.password;

  // Do some data validation
  if (!user || !pass) {
    $window.alert('Please, enter a username and a password!');
    return;
  }

  // Send the data and parse the response
  // (usually done via a Service)
  LoginService.login(user, pass);
};

---

See, also, this short demo.

Trigger the click event on an element if a condition is true in Angular js

You can do something like this,

<script>
$(document).ready(function () {
$(".mdcl-tab1").on('click',function(){

    $(this).addClass('tick');
    $('.ex1').attr('id', 'ex1');

});

if($scope.datadict.days.includes('Nearly everyday')){
$(".mdcl-tab1").trigger("click");
}
});

and remove the ng-click attribute from the anchor tag

<a class="mdcl-tab1">

---

Related Topics