如何觸發angularjs ng-repeat內的點擊事件？

Question

我正在做ng-repeat來顯示我的應用程序中的項目列表。點擊單個項目，我需要顯示項目內部的調查列表。但是，當頁面第一次加載時，我想觸發第一個項目的默認點擊事件。

下面是該列表項目的html代碼。

projectlist.html

<ul class="sidebar-nav"> 
      <li class="sidebar-brand" > 
       <a> 
        Projects 
       </a> 
      </li> 
      <li ng-repeat="obj in allProjects track by $id(obj)"> 
       <a ui-sref="survey.surveyList({id: obj.ProjectID})" ng-click="getProjSurveys(obj.ProjectID)" data-id="{{obj.ProjectID}}">{{obj.ProjectName}}<span class="projectsetting"><img src="./images/settings.png"/></span></a> 
      </li> 
     </ul> 

ctrl.js

require('../styles/survey/survey.less'); 

angular.module("adminsuite").controller("surveyController",['getAllSurveyService','$timeout','AuthenticationService', '$scope','$rootScope', '$state', '$stateParams', function(getAllSurveyService,$timeout, AuthenticationService,$scope,$rootScope,$state,$stateParams){ 
$rootScope.header = "survey"; 
$scope.hoverIn = function(){ 
    this.hoverEdit = true; 
}; 

$scope.hoverOut = function(){ 
    this.hoverEdit = false; 
}; 

$rootScope.surveySelected = false; 

    console.log($('.checked').length); 
    console.log($('.checkbox').length); 

if($state.current.name != 'login'){ 
        $rootScope.bgGround = 'bgBlank'; 
        $rootScope.footerbgGround = 'bgFooter'; 
     } 

    $scope.supported = false; 
    $scope.wapLink = 'http://apidev.1pt.mobi/i/interview?uid=188A80CF0D61CA60D2F5_495F23E0FD4B9120D1E7&surveyid=20903';   
    $scope.success = function ($event) { 
     $scope.supported = true; 
     console.log($(".copied")); 
    }; 

    $scope.fail = function (err) { 
     console.error('Error!', err); 
    }; 
    getAllSurveyService.surveyList().then(
     function(data) { 
     $scope.allProjects = data; 
      $scope.allSurveys = data[0].Surveys; 
      if($scope.allSurveys.ErrorMessage){ 
      AuthenticationService.ClearCredentials(); 
      } 
     } 
); 
    $scope.getReportDetails = function(){ 
     return $http.get('http://localhost:8395/api/UserSurvey/GetAllSurveys', { 
            headers: { 'Content-Type': 'application/json','SessionID':$rootScope.token} 
           }) 
    }; 

    $scope.getProjSurveys = function(projId){ 
    var i; 
    for(i in $scope.allProjects){ 
     if(projId == $scope.allProjects[i].ProjectID){ 
     $scope.allSurveys = $scope.allProjects[i].Surveys; 
     } 
    } 
    angular.element(document.querySelectorAll(".surveymodule")).removeClass('toggled'); 
    }; 

$scope.toggleClass = function($event){ 
angular.element($event.target).toggleClass("checked"); 
$rootScope.selectedItems = angular.element(document.querySelectorAll(".checked")).length; 
angular.element($event.target).parent().toggleClass("active"); 
if(angular.element(document.querySelectorAll(".checked")).length < 1){ 
    $rootScope.global.showNewHeader= false; 
}; 
}; 
}]); 

上點擊我能夠顯示在用戶界面視圖數據的項目，但對於第一次在頁面加載時無法觸發第一個項目的點擊事件。我在控制器內使用angular.element和trigger（'click'）嘗試了上面的代碼，但它不適用於我。請幫忙。

Answer 1

問題是您正在使用ui-sref以及ng-click。這裏狀態在功能完成之前正在改變，並且重新加載控制器（如果兩個狀態具有相同的控制器）或更改控制器。因此ng-click finction未運行。

刪除ui-sref和使用$state.go()改變內部ng-click

示例代碼這裏的狀態：

HTML

<ul class="sidebar-nav"> 
     <li class="sidebar-brand" > 
      <a> 
       Projects 
      </a> 
     </li> 
     <li ng-repeat="obj in allProjects track by $id(obj)"> 
      <a ng-click="getProjSurveys(obj.ProjectID)" data-id="{{obj.ProjectID}}">{{obj.ProjectName}}<span class="projectsetting"><img src="./images/settings.png"/></span></a> 
     </li> 
    </ul> 

JS：

$scope.getProjSurveys(objId){ 
    // your codes here 
    $state.go('survey.surveyList({'id': objId})') 
} 

Answer 2

，而不是試圖與DOM的互動，你應該做這樣的事情：

getAllSurveyService.surveyList().then(
    function(data) { 
    $scope.allProjects = data; 
    $scope.allSurveys = data[0].Surveys; 
    $scope.getProjSurveys($scope.allProjects[0].ProjectID) 

    if($scope.allSurveys.ErrorMessage){ 
     AuthenticationService.ClearCredentials(); 
     // $state.go('login'); 
    } 
    }); 

Answer 3

這實際上是angularjs問題。 JQuery的觸發器點擊事件沒有在angular的ng-repeat中被觸發。

檢查：https://github.com/angular/angular.js/issues/3470