使用Angular在列表的第一個元素上觸發click事件

Question

我想觸發單擊列表的第一行。我正在使用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')
        }
      };
    });

請找到相同的塞子 。

Answer 1

您的代碼有兩件事：

1. “ el [0]”將返回不支持.find（）選擇器的本機元素。 您想找到第一個<li>並用angular.element包裹起來，以便可以在其上調用triggerHandler（）。

2. 此代碼將觸發得太早，在觸發點擊之前，點擊處理程序將無法正確綁定。 您可以將其包裝在$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事件，如果其他偵聽器綁定到同一click事件，則可能會得到不希望的結果
• 如果click事件未能觸發（例如，以后將該行設置為只讀），則可能無法接收默認值
• 摘要周期后更新狀態的模式可能導致不可預測的行為，因為它為生命周期中較早的其他行為（即在設置初始范圍值之前）提供了機會

Answer 2

我猜您正在尋找“默認”選擇的選項。

如果是這樣，這是the車手： https ://plnkr.co/edit/szj72Vtzw431EZY52wEL ? p = preview

基本上，您必須在控制器中為$scope.newReq變量設置默認值：

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

做到這一點，而不是“黑客”點擊事件。 這不是解決此問題的正確方法。

Answer 3

首先，請不要從控制器訪問DOM。

然后，我認為您可能希望“觸發第一行的getRow函數”，而不是“觸發第一行的單擊 ”。 真的不同。

如果這是您要實現的目標，則可以這樣完成：

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;
    };
});