Search code examples
javascriptangularjsangular-ui-router

angularjs onload click on table column field


I have problem with clicking on row element field when go to edit page. On edit page i have table, on every name in table I added id that is actualy ID of that row data

<tr ng-repeat="row in $data" ng-class="{clicked: row._id == rowClicked}"">
   <td data-title="'Name' | translate" sortable="'name'" id="{{row._id}}"
       ng-click="populateDivisionServices(row)" 
      class="nameCursor">
      {{row.name | ci18n}}
   </td>

onload edit page i put this

$scope.$on('$stateChangeSuccess', function () {
  $timeout(function() {
    angular.element(document.getElementById($scope.division._id)).triggerHandler('click');
  }, 0);
});

or

$scope.$on('$stateChangeSuccess', function () {
  $timeout(function() {
    angular.element(document.getElementById($scope.division._id)).triggerHandler('click');
  }, 500);
});

or

$scope.$on('$stateChangeSuccess', function () {
    angular.element(document.getElementById($scope.division._id)).triggerHandler('click');
});

but nothing does not work, i debugg through console and it go to this function but it does not click on this name, because when it click on name it should be highlighted.


Solution

  • Simply call the function from the controller:

    var row = $scope.$data.find(_ => _._id == $scope.division._id);
    $scope.populateDivisionServices(row);
    

    No need to use .triggerHandler to invoke the function.