javascript - 使用 Angular 在列表的第一个元素上触发点击事件

Question

我想在列表的第一个 li 上触发点击。我正在使用 ng-repeat 来填充列表。我知道它可以使用指令来完成，但不确定如何去做。

HTML:

<ul  id="my-ul" click-first-row>
      <li ng-repeat="row in rows" ng-click="getRow(row,$index)" >{{row.requestId}}</li>
    </ul>

JS:

angular.module('App',[]).controller('Ctr',function($scope){
      $scope.rows = res.inboxNewRecords;
      angular.element(document.querySelector('#my-ul li')).triggerHandler('click');
      $scope.getRow = function(data,index){
        $scope.newReq = data;
      };
    }).directive('clickFirstRow',function(){
      return{
        restrict:'A',
        link:function(scope,el,attr){
          console.log(el[0]);
          el[0].find('li').triggerHandler('click')
        }
      };
    });

请找到plunker同样。

Answer 1

关于您的代码的一些事情:

1. "el[0]"将返回不支持 .find() 选择器的原生元素。你想找到第一个 <li>并用 angular.element 包裹它，这样您就可以在其上调用 triggerHandler()。

2. 此代码会过早触发，点击处理程序在您触发点击之前不会正确绑定(bind)。您可以将其包装在 $timeout() 中, 或者更好的是仍然使用 $$postDigest回调。

工作插件:https://plnkr.co/edit/O6BeOEieSdNj3Y3KkAYc?p=preview

scope.$$postDigest(function() {
    var firstRow = el.find('li')[0];
    angular.element(firstRow).triggerHandler('click');
});

但是，对于您描述的目的，更好的方法是绑定(bind)您的 newReq收到响应后立即将范围变量添加到第一行:

$scope.rows = res.inboxNewRecords;
if ($scope.rows && $scope.rows.length > 0) {
    $scope.newReq = $scope.rows[0];
}

设置初始值更好的原因有很多:

• 以这种方式绑定(bind)到点击事件，如果其他监听器绑定(bind)到同一个点击事件，您可能会得到不希望的结果
• 如果点击事件未能触发(即该行稍后变为只读)，您可能无法收到默认值
• 摘要周期后更新状态的模式可能会导致不可预测的行为，因为它为其他操作提供了在生命周期早期发生的机会，即在设置初始范围值之前