ui-路由器。从对象/函数获取状态名称

2024-04-03

我想知道,有什么方法可以用对象或函数引用视图中的状态吗?

只是为了将视图与状态定义分离。例如。如果我更改状态名称,我不必在我的视图中的所有地方更改它。


可以在这里找到如下所述的一种解决方案,作为一种可行的解决方案plunker http://plnkr.co/edit/pujRy9eUeHnZInPuXT23?p=preview

在此示例中,我们将为某些实体(例如员工)定义状态,例如:

  1. list查看和
  2. detail view.

让我们使用一些变量entityName起到解耦命名的作用:

var entityName = "employee";

$stateProvider
    .state(entityName, {
        url: '/' + entityName,
        views: {
          ...
      }})

    .state(entityName + '.detail', {
        url: '/{{Id}}',
        views: {
          ...
      }});

从列表导航到详细视图(正如我们所看到的,没有使用明确的“员工”名称):

<a ui-sref="{{detailLink(item)}}" >{{item.Name}}</a>

接下来我们必须定义detailLink(item)。我们将直接在controller在这里,但可能是一些ListModel改为实例,封装更多操作(分页、排序), 包括detailLink.

controller:['$scope','$state',
  function ( $scope , $state){ 

      $scope.detailLink = function (item){

          // here we get the employee in run-time
          var currentState = $state.current.name; 
          var sref = currentState + '.detail({Id:' + item.Id + '})';
          return sref;
      };
}],

就是这样。它可能会更复杂......完整的示例代码(如下所述定义)可以找到并运行here http://plnkr.co/edit/pujRy9eUeHnZInPuXT23?p=preview

.config(['$stateProvider',
function( $stateProvider) {

    var entityName = "employee";

    $stateProvider
      .state(entityName, {
        url: '/' + entityName,
        views: {
          body: {
          template: '<div>' +
                    '  <h2>List View</h2> ' +
                    '  <ul ng-repeat="item in items"> ' +
                    '   <li><a ui-sref="{{detailLink(item)}}" >{{item.Name}}</a>' +
                    '  </li></ul>' +
                    '  <h2>Detail View</h2> ' +
                    '  <div ui-view="detail"></div>' +
                    '</div>',
          controller:['$scope','$state',
            function ( $scope , $state){ 

              $scope.items = [{Name : "Abc", Id : 0}, {Name : "Def", Id : 1}];

              $scope.detailLink = function (item){

                 var currentState = $state.current.name;
                 return currentState + '.detail({Id:' + item.Id + '})';
              };
          }],
        }
      }})
      .state(entityName + '.detail', {
        url: '/{{Id}}',
        views: {
          detail: {
          template: '<div>' +
                    '  <label>{{item.Name}} ' +
                    '  <input ng-model="item.Name"}}" type="text" />' +
                    '  <div>current state name: <i>{{state.name}}<i></div> ' +
                    '</div>',
          controller:['$scope','$stateParams','$state',
            function ( $scope , $stateParams , $state){ 
              $scope.state = $state.current
              $scope.item = $scope.items[$stateParams.Id];
          }],
        }
      }});

}])
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ui-路由器。从对象/函数获取状态名称 的相关文章

随机推荐

  • Julia 多次调度失败

    v06 我想写一个需要 2 到 3 个参数的签名 第一个是整数或整数向量 第二个是整数向量或整数矩阵 第三个是整数向量或未指定 我第一次尝试是这样的 function foo a Union Integer Vector Integer b
  • Django 模型与管理器

    不太确定有什么区别 看起来 Manager 所做的只是拥有一堆与模型相关的功能 但这些功能也可以放在模型中 Django 文档对 Manager 的描述如下 Manager 是数据库查询操作的接口 提供给 Django 模型 那么 除了这个
  • 唯一导入*仅允许在模块级别[重复]

    这个问题在这里已经有答案了 我正在制作一个实用程序 其中内置了多个程序 但我对程序进行了一些更改 以便在用户提示时重新运行 然后由于某种原因 我面临错误 import only allowed at module level 这是我的代码
  • 打字稿错误:“请求”类型中不存在属性“用户”

    我的 Express 应用程序中有以下代码 router get auth userInfo this validateUser req res gt res json req user 我的 IDE 似乎在抱怨这个错误 错误 TS2339
  • 不同编译器中的 pure/const 函数属性

    pure是一个函数属性 表示函数不会修改任何全局内存 const是一个函数属性 表示函数不读取 修改任何全局内存 有了这些信息 编译器就可以进行一些额外的优化 海湾合作委员会示例 float sigmoid float x attribut
  • 无法从 android studio 中删除模拟器/avd?

    我一直在通过 Android Studio 运行 AVD 模拟器 它一直按预期工作 然而 模拟器 AVD 每次都开始崩溃 现在似乎处于损坏状态 我尝试通过 AS VDM 删除 AVD 但尝试执行此操作时会显示一条警报 其中包含以下错误消息
  • 将数据写入android中的远程文本文件

    如何将数据写入 android 中的远程文本文件 我可以读取文本文件的内容 但无法向其中写入数据 我的目标是将文本文件的内容更改为新文件 我使用 xampp 作为远程服务器 因为我家里没有互联网连接 这是我的代码 package com e
  • 如何滚动故事板预览?

    故事板有一个水平滚动条 供您滚动查看其他场景 但预览故事板场景时滚动条不存在 如何滚动故事板预览 假设我没有使用魔术鼠标 关于什么Shift Mouse Scroll 或者 如果您使用的是 Macbook 请在触控板上向左或向右滑动两根手指
  • 附加到 div 的 Bootstrap 箭头

    总的来说 我对引导程序和前端框架非常陌生 但是 我能够注意到使用 bootstrap 的网站的共同特征 下图包含我发现在引导网站中非常普遍的东西 指向其下方文本的向下 或任何方向 蓝色箭头也是我所指的 我使用 firebug 检查了这些元素
  • 如何从 svn 热复制备份中恢复

    我们当前的备份过程是每晚执行 SVN HOTCOPY 到另一台机器上的备份位置 我可以以某种方式从该备份中恢复并保留所有修订历史记录吗 或者我需要使用 svn dump load 吗 谢谢 钱德拉吉特 svnadmin hotcopy 实际
  • 纪元时间和 MySQL 查询

    我有一个这样的表 id date 1 1319043263 2 1319043578 纪元中的日期字段格式 我必须对属于同一天的每一行进行分组 并将它们显示在单独的组中 我怎样才能在 MySQL 中做到这一点 Thanks 通过 分组 SE
  • 如何阻止乌龟在提笔的情况下绘图?

    我正在Python中使用turtle模块 问题是 每当我让乌龟移动时 即使笔在上面 我也会画画 例如 如果我运行这个程序 import turtle turtle penup turtle goto 0 50 海龟移动到 0 50 时仍会画
  • C# with Unity 3D:当用户移动鼠标时如何使相机围绕对象移动

    我正在尝试在 Unity 4 中进行 3D 观看模拟 用户可以选择一个对象并移动鼠标围绕它旋转 360 度 我已经拍摄了很多镜头来尝试让它工作 但每次都失败 任何我们将不胜感激 如果它是用 C 编写的 那就太好了 但没必要 提前致谢 这是一
  • 以全高嵌入 PDF

    我的问题 是否可以将 PDF 嵌入到高度始终为 100 的 HTML 文档中 问题是 pdf 的实际高度可能会有所不同 布局需要对此做出响应 将 PDF 嵌入 HTML 的方法有多种 一种是使用PDF对象 http www pdfobjec
  • Fluent NHibernate 两级继承问题

    我希望在一个级别中为每种类型提供一个表 在另一级别中为层次结构提供一个表 是否可以 描述在这里 gt 我有这些课程 public class BaseItem public int Id get set public class Item
  • 随机排列列表中的元素(随机重新排列列表元素)

    我的程序的一部分要求我能够随机洗牌列表元素 我需要一个函数 当我给它一个列表时 它会伪随机地重新排列列表中的元素 安排的改变Must每次通话时都可以看到相同的列表 我的实现似乎工作得很好 但我觉得它相当长 并且正在增加我的代码库 而且 我有
  • System.currentTimeMillis 的长度

    Does System currentTimeMillis始终返回固定长度的值 在我的 Windows Core2 中 它返回一个 13 位长的值 从它的 API 来看 返回当前时间 以毫秒为单位 请注意 虽然返回值的时间单位是毫秒 但该值
  • 水晶报表中整数到字符串转换的问题

    我想将 int 转换为字符串 然后将点与其连接 这是公式 totext SrNo 它工作完美 但不是我想要的 我想显示为 1 但它以这种方式向我展示 1 00 这意味着当我尝试将 int 转换为字符串时 它会将其转换为精度为两个小数零的数字
  • Angular 项目结构最佳实践

    这是我的 Angular 项目的目录结构 Angular 应用程序可以通过许多不同类型的组件而变得庞大 组织 Angular 应用程序的最佳实践是什么 app layout home layout header menu content d
  • ui-路由器。从对象/函数获取状态名称

    我想知道 有什么方法可以用对象或函数引用视图中的状态吗 只是为了将视图与状态定义分离 例如 如果我更改状态名称 我不必在我的视图中的所有地方更改它 可以在这里找到如下所述的一种解决方案 作为一种可行的解决方案plunker http pln