automatically click button after page load in angularjs

Question

I am looking to know if there is a way to perform a button click automatically on an angularjs page once the page loads based on a querystring value. For example in a simple asp.net web forms page if a querystring in a url is true then I can simply call Button1_Click(sender,e); to handle the click event in the page load. But this HTML5 page uses angularjs and I just cant seem to figure out how to do it. Any help would be highly appreciated.

EDIT: Maybe I wasnt clear enough in my explanation...my bad. But here goes..This is what I intend to do.[Since I cant post pictures yet...]

http://host/app/Quik.aspx?Order=5779809

UI:

TxtLookupNum: {{InputValue}}    DdlWMS:{{WMSKey}}    DdlWsNum: {{WorkStationName}}
btnLookup:Submit

Angular code:

$scope.Lookup = function(WMSKey,InputValue,WSNum);

When my aspx page has a query string parameter I'd like to automatically trigger a click event and pass the 3 parameters to my angular method like above.

This is how I wrote it and it worked but:

var inputVal = $('#txtLookupNum'); 
if (inputVal.val() != "") {$("#btnLookup").trigger("click");}   

But now I am getting the below error:

TypeError: Cannot read property '0' of undefined [after stripping out all the stack trace]

Solution 1

One way to do it can be a custom directive. Directive onLoadClicker in the attached snippet clicks the element on which it is defined once the directive is rendered - in your case on the page load.

The ng-click="wasClicked()" is there just for control that it was really clicked, see browser console. That's also why I defined priority of -1, because ng-clicks priority is 0.

You just need to provide your logic (wrap the $timeout in an if()) on when to do it and when not to (for example based on routeParams).

Note: $timeout is there to make Angular world aware of the click (will run digest cycle), without it Angular would not notice something happened.

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', ['$scope',
  function($scope) {
    $scope.wasClicked = function() {
      console.log('I was clicked!');
    }
  }
]);

myApp.directive('onLoadClicker', ['$timeout',
  function($timeout) {
    return {
      restrict: 'A',
      priority: -1,
      link: function($scope, iElm, iAttrs, controller) {
        $timeout(function() {
          iElm.triggerHandler('click');
        }, 0);
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <a href="" ng-click="wasClicked()" on-load-clicker>link</a>
</div>

Solution 2

If you are trying to call a function during onload , then try this

var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();


// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};