在angularjs中加载页面后自动单击按钮 [英] automatically click button after page load in angularjs

问题描述

我想知道一旦基于查询字符串值加载页面，是否有办法在angularjs页面上自动执行按钮点击。例如，在一个简单的asp.net web表单中，如果url中的查询字符串为true，那么我只需调用 Button1_Click（sender，e）; 来处理单击事件页面加载。但这个HTML5页面使用angularjs，我似乎无法弄清楚如何做到这一点。任何帮助都将受到高度赞赏。

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.

编辑：也许我的解释不够清楚......我的不好。但是这里......我打算这样做。[因为我不能发布图片了...]

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

角度代码：

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

当我的aspx页面有查询字符串参数时，我想自动触发点击事件并通过像上面我的角度方法的3个参数。

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：无法读取属性'0'未定义 [剥离所有堆栈跟踪后]

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

推荐答案

一种方法可以是自定义指令。附加代码段中的指令 onLoadClicker 在指定呈现时单击指定它的元素 - 在您加载页面的情况下。

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.

ng-click =wasClicked（）只是为了控制它真的被点击了，请参阅浏览器控制台。这也是我定义 -1 的优先级的原因，因为 ng-click 的优先级是 0 。

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.

你只需要提供你的逻辑（包裹 $ timeout if（））何时执行以及何时不执行（例如基于 routeParams ）。

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).

注意：$ timeout是为了让Angular世界知道点击（将运行摘要周期），没有它Angular不会注意到发生的事情。

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>

这篇关于在angularjs中加载页面后自动单击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！