Call a method in ui-sref in angularJS

Question

I have below code in ngGrid:

cellTemplate: '<div class="padding-t-5 padding-l-5"><a ui-sref="editCamera({id:row.entity.id})" ><i class="fa fa-edit margin-r-10"></i></a>\n\
                    <button ng-click="confirmClick() && grid.appScope.deleteRow(row)" confirm-click><i class="fa fa-trash"></i></button></div>'

I wondering how to define the editCamera method mentioned in ui-sref into the controller.

If I add ng-click then how would I pass the id (passed on ui-sref)

I tried to define using $scope.editCamera, but dint worked.

****UPDATE******

What I need is to perform add and edit operations in a same controller, for this I need a different method for the edit operation.

Answer 1

ui-sref will treat editCamera() as state for angular routing as when compiled it converts into ng-href . So if you define editCamera() in controller it wont get called as its a routing state and the params pass into it i.e ID will act as the routes parameter . To call a function you need to use ng-click instead .

Or if you are going with routing than create editCamera as state with params ID and use ui-sref .

Answer 2

Use ng-click instead of the ui-sref

HTML

<div class="padding-t-5 padding-l-5">
  <a ng-click="editCamera(row.entity.id)">
    <i class="fa fa-edit margin-r-10"></i>
  </a>
  <button ng-click="confirmClick() && grid.appScope.deleteRow(row)" confirm-click>
    <i class="fa fa-trash"></i>
  </button>
</div>

JS

$scope.editCamera = function(id) {
  $state.go('INSERT-EDIT-CAMERA-STATE-NAME-HERE', {id: id});
}

Final note - semantically speaking now that we have killed the ui-sref which in turn kills the href it generates it would be good to change the element to a button or something else than an anchor tag. But i leave semantics up to you.

Answer 3

ui-sref is a State Reference used by the UI-Router. Instead of calling a controller method, this is used to route to another page.