Question

我正在进行ng-repeat以在我的应用中显示项目列表。点击单个项目我需要显示项目内的调查列表。但是当第一次加载页面时，我想触发第一个项目的click事件，这是默认的。

下面是该列表项目的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;
};
};
 }]);

点击项目我能够在ui-view中显示数据但是第一次加载页面时无法触发第一个项目的click事件。我尝试使用angular.element和trigger（'click'）在控制器内部使用上面的代码，但它对我不起作用。请帮忙。

Answer 1

这实际上是angularjs问题。 JQuery的触发点击事件没有在角度的ng-repeat中被触发。

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

Answer 2

问题是您使用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 3

不应尝试与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');
    }
  });

如何在angularjs的ng-repeat内触发click事件？

3 个答案: