Question

我想触发List的第一个li的点击。我正在使用ng-repeat填充List.I知道可以使用指令完成但不知道如何操作。

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

您的代码有几点：

＆＃34; EL [0]＆＃34;将返回一个不支持.find（）选择器的本机元素。你想找到第一个<li>并用angular.element包装它，这样就可以在它上面调用triggerHandler（）。
此代码会过早触发，点击处理程序在您触发点击之前不会被正确绑定。您可以将其打包在$timeout()中，或者更好地使用$$postDigest回调。

工作plunkr：https://plnkr.co/edit/O6BeOEieSdNj3Y3KkAYc?p=preview

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

但是，出于您描述的目的，更好的方法是在获得响应后立即将newReq范围变量绑定到第一行：

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

为什么这样做更适合设置初始值有很多原因：

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

Answer 2

我猜你正在寻找一个“默认”选择的选项。

如果是这样，这里是plunkr：https://plnkr.co/edit/szj72Vtzw431EZY52wEL?p=preview

基本上，您必须为控制器中的$scope.newReq变量设置默认值：

$scope.newReq = $scope.rows[0];

这样做，而不是“黑客”点击事件。这不是解决这个问题的正确方法。

Answer 3

首先，请不要从控制器访问DOM。

然后，我想你可能想要触发第一行的getRow函数＆＃34;而不是＆＃34;在第一行触发点击＆＃34;。这真的不一样。

如果这是你想要实现的目标，可以这样做：

angular
.module('App',[])
.controller('Ctr', function($scope, $http) {
    // launch http request from controller even tho
    // it'd probably be a better idea to handle it from a service
    $http
        .get('http://your-backend-url-to-get-inbox')
        .then(function(res) {
            $scope.rows = res.data.inboxNewRecords;

            if (typeof $scope.rows[0] !== 'undefined') {
                $scope.getRow($scope.rows[0], 0);
            }
        });

    $scope.getRow = function(row, index){
        $scope.newReq = data;
    };
});

使用Angular在列表的第一个元素上触发click事件

3 个答案: