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.

Why do you need to define `editCamera` as a method in the controller? Isn't the `editCamera` the name of the state you're navigating to? — Chanthu, Jun 29 '16 at 11:19

score 3 · Answer 1 · answered Jun 29 '16 at 11:21

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 .

Sten Muchow · Accepted Answer · 2016-06-29T11:18:15.073

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.

edited Jun 29 '16 at 11:18

answered Jun 29 '16 at 11:16

Sten Muchow

6,623
4
36
46

why you are suggesting ng-click instead of ui-sref. I am just curious. – MonsterJava Jun 29 '16 at 11:17
1

ui-sref doenst do what u want it to do... if you just want to pass the id to the state then use ui-sref="state-name({id: row.entity.id})" – Sten Muchow Jun 29 '16 at 11:19
http://stackoverflow.com/questions/25647454/how-to-pass-parameters-using-ui-sref-in-ui-router-to-controller – Sten Muchow Jun 29 '16 at 11:21

score 0 · Answer 3 · answered Jun 29 '16 at 11:22

0

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.

answered Jun 29 '16 at 11:22

Martin

15,820
4
47
56

Call a method in ui-sref in angularJS

3 Answers3