Запуск события клика по первому элементу списка с помощью Angular

Question

Я хочу вызвать щелчок по первому элементу списка. Я использую 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

Несколько вещей с вашим кодом:

1. «эль [0]» вернет родной элемент, который не будет поддерживать селектор .find(). Вы хотите найти первый <li> и обернуть его угловым элементом, чтобы вы могли вызвать 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]; 
} 

Существует ряд причин, почему это лучше для установки начальных значений:

• Связывая событие щелчка в этом случае вы можете получить нежелательные результаты, если другие слушатели привязаны к одному событию щелчка
• Вы можете не в состоянии получить значение по умолчанию, если событие щелчка не может вызвать (т.е. строка позже становится доступной только для чтения)
• Образец обновления состояния после цикла дайджеста может привести к непредсказуемому поведению, поскольку это дает возможность для других действий произойти ранее в жизненном цикле, то есть до того, как начальное значение области было set

Answer 2

Я думаю, вы ищете вариант по умолчанию.

Если да, то вот plunkr: https://plnkr.co/edit/szj72Vtzw431EZY52wEL?p=preview

В принципе, вы должны установить значение по умолчанию для $scope.newReq переменной в контроллере:

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

это сделать, вместо «взлома» щелчку мероприятие. Это не правильный способ решения этой проблемы.

Answer 3

Прежде всего, пожалуйста, не обращайтесь к DOM с контроллера.

Тогда, я думаю, вы можете «вызвать функцию getRow для первой строки» вместо «trigger» нажмите на первую строку ». Это действительно другое.

Если это то, что вы пытаетесь достичь, это можно сделать так:

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