在angularJS中调用ui-sref中的方法

Posted

技术标签:

【中文标题】在angularJS中调用ui-sref中的方法【英文标题】:Call a method in ui-sref in angularJS 【发布时间】:2016-11-01 01:04:15 【问题描述】:

我在 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>'

我想知道如何将ui-sref中提到的editCamera方法定义到控制器中。

如果我添加 ng-click 那么我将如何传递 id(在 ui-sref 上传递)

我尝试使用 $scope.editCamera 进行定义,但 dint 起作用了。

****更新******

我需要在同一个控制器中执行添加和编辑操作,为此我需要一种不同的编辑操作方法。

【问题讨论】:

为什么需要在控制器中定义editCamera作为方法? editCamera 不是您要导航到的州的名称吗? 我需要执行一些操作。 【参考方案1】:

ui-sref 将 editCamera() 视为角度路由的状态,因为在编译时它会转换为 ng-href 。因此,如果您在控制器中定义 editCamera() ,它将不会被称为路由状态,并且参数传递给它,即 ID 将充当路由参数。要调用函数,您需要使用 ng-click 代替。

或者,如果您要使用路由而不是使用参数 ID 创建 editCamera 作为状态并使用 ui-sref 。

【讨论】:

【参考方案2】:

使用 ng-click 代替 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);

最后一点 - 从语义上讲,现在我们已经杀死了 ui-sref,而后者又杀死了它生成的 href,最好将元素更改为按钮或锚标记以外的其他东西。但我把语义留给你。

【讨论】:

为什么您建议使用 ng-click 而不是 ui-sref。我只是好奇。 ui-sref 不会做你想做的事......如果你只是想将 id 传递给 state 然后使用 ui-sref="state-name(id: row.entity .id)" ***.com/questions/25647454/…【参考方案3】:

ui-sref 是 UI-Router 使用的状态引用。这不是调用控制器方法,而是用于路由到另一个页面。

【讨论】:

以上是关于在angularJS中调用ui-sref中的方法的主要内容,如果未能解决你的问题,请参考以下文章

在 spring boot+security+angularjs 中使用 angular-routing(ui-sref) 刷新页面

AngularJS UI-Router 中 ui-sref 和 $state.go 的区别

如何访问状态参数(ui-sref)而不将它们包含在angularjs中状态的URL属性中

在 Angularjs 中 ui-sref 和 $state.go 如何传递单个多个参数和将对象作为参数

关于angularjs的$state.go()与ui-sref传参问题

AngularJS 1.5“无法从州'家'解决'___'”