how to get button using id and call its click event - Angular

Question

i have a button that call a function on ng-click , my issue is : how can i get this button using the id and call the click event on my Angular run function, this is my code :

<button ng-click="myfunction()" id="myButton">Click !!</button>


app.run(['$rootScope',function($rootScope) {
// by default i want to click my button when the app is loaded
}]);

Note: i have a problem with "myfunction()" , this why i want to call it indirectly.

thanks in advance.

What you are wanting won't work.Generally your html won;t exist when app is loaded and run() block executes if you are using routing or directive templates and the dom hasn't been compiled either and neither has controller been run. Why not fix myfunction() here? — charlietfl
– charlietfl, Commented Jun 26, 2016 at 18:57
IMHO, simulating user interaction to trigger a function automatically is a bad idea. This often leads into subsequent problems. If you could elaborate more, what keeps you from calling myfunction() directly, probably this might help us suggesting a cleaner alternative? Using the ngInit attribute, as @avim101 suggested, could be a solution - although it does not happen during app startup. — Konstantin A. Magg
– Konstantin A. Magg, Commented Jun 26, 2016 at 19:10
Hello guys , to explain you what is my problem, i'm using this tree-grid : khan4019.github.io/tree-grid-directive/test/treeGrid.html , when the page is loaded all the elements in the grid are expanded, so if i want to collapse them , i should click the button, to fix my problem i'm trying to call the collapse function without clicking on the button, do you have any suggestion to fix this issue? thank you in advance — James
– James, Commented Jun 26, 2016 at 19:23
All you need to do is set the expand-level property. It's part of the api already. No need for this button or function hack. This has beena complete XY Problem...always include relevant details related to higher level problem — charlietfl
– charlietfl, Commented Jun 26, 2016 at 20:41
Hi @charlietfl , please , can you show me where and how to set the expand-level property? — James
– James, Commented Jun 26, 2016 at 23:04

avim101 · Accepted Answer · 2016-06-26 22:17:53Z

1

you can use ng-init

<button ng-click="myfunction()" id="myButton" ng-init="myfunction()">Click !!</button>

but if you still want:

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

edited Jun 26, 2016 at 22:17

answered Jun 26, 2016 at 19:05

avim101

3001 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

I solved my problem using: $timeout(function() { angular.element('#myButton').triggerHandler('click'); }, 0);

georgeawg · Accepted Answer · 2016-06-26 21:32:28Z

0

To execute a function when a controller is loaded simply invoke it in the controller.

HTML

<div ng-controller="myController">
    <button ng-click="myFunction()" id="myButton">Click !!</button>
</div>

JS

app.controller("myController", function($scope) {
    //Define function
    $scope.myFunction = function (event) {
        //Perform click function
    };

    //Invoke function when controller loaded
    $scope.myFunction();
});

edited Jun 26, 2016 at 21:32

answered Jun 26, 2016 at 19:09

georgeawg

49k13 gold badges78 silver badges98 bronze badges

2 Comments

charlietfl Over a year ago

Can also assign $scope.myFunction to a global variable so you can quickly run it from console if needed ... window.test = $scope.myFunction

James Over a year ago

thank you @georgeawing for the response, my problem is, i'm using this tree-grid : khan4019.github.io/tree-grid-directive/test/treeGrid.html , when the page is loaded all the elements in the grid are expanded, so if i want to collapse them , i should click the button, to fix my problem i'm trying to call the collapse function without clicking on the button, do you have any suggestion to fix this issue? thank you in advance

Collectives™ on Stack Overflow

how to get button using id and call its click event - Angular

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related