ng-repeatのangularjs内でクリックイベントをトリガーする方法はありますか？

Question

私は、アプリケーションでプロジェクトリストを表示するためにng-repeatをやっています。個々のプロジェクトをクリックすると、プロジェクト内のアンケートのリストを表示する必要があります。しかし、ページが初めて読み込まれるとき、私はデフォルトの最初のプロジェクトのクリックイベントをトリガーしたいと思います。

以下は、そのリストプロジェクトのhtmlコードです。私は、UIビュー内のデータを表示することができていたプロジェクトのクリックではなく、初めて

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 finctionは実行されていません。

ui-srefを削除し、ここng-click

サンプルコード内の状態を変更するために$state.go()を使用します。

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

代わりに、あなたはこのような何かを行う必要がありますDOMと対話しようとしているの

Answer 2

：

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のトリガクリックイベントは、角度のng-repeatでトリガされません。この

チェック：https://github.com/angular/angular.js/issues/3470