javascript 在angularjs中加载页面后自动单击按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26494948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
automatically click button after page load in angularjs
提问by BRBdot
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.
我想知道是否有一种方法可以根据查询字符串值在页面加载后自动在 angularjs 页面上执行按钮单击。例如，在一个简单的 asp.net 网页表单页面中，如果 url 中的查询字符串为真，那么我可以简单地调用Button1_Click(sender,e);以处理页面加载中的点击事件。但是这个 HTML5 页面使用了 angularjs，我似乎无法弄清楚如何去做。任何帮助将不胜感激。
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.
当我的 aspx 页面有一个查询字符串参数时，我想自动触发一个点击事件并将这 3 个参数传递给我的 angular 方法，就像上面一样。
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]
类型错误：无法读取未定义的属性“0”[剥离所有堆栈跟踪后]
回答by przno
One way to do it can be a custom directive. Directive onLoadClickerin the attached snippet clicks the element on which it is defined once the directive is rendered- in your case on the page load.
一种方法可以是自定义指令。指令onLoadClicker在连接片段点击它，一旦指令被定义它的元素渲染-你的情况在页面加载。
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.
该ng-click="wasClicked()"是那里只是控制它真的点击，看到浏览器控制台。这也是我定义优先级的-1原因，因为ng-clicks 的优先级是0。
You just need to provide your logic (wrap the $timeoutin an if()) on when to do it and when not to (for example based on routeParams).
您只需要提供关于何时执行和何时不执行（例如基于routeParams）的逻辑（将其包裹$timeout在 an 中）。if()
Note: $timeout is there to make Angular world aware of the click (will run digest cycle), without it Angular would not notice something happened.
注意： $timeout 是为了让 Angular 世界意识到点击（将运行摘要循环），没有它，Angular 不会注意到发生了什么。
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>回答by Sridhar Gudimela
If you are trying to call a function during onload , then try this
如果你试图在 onload 期间调用一个函数，那么试试这个
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
};
