我如何在 angularjs UI-Router 中为 ng-repeat 中的项目路由到不同的 URL，需要修改 ui-router 中的状态

Question

我正在使用 UI-路由器，我的 html 如下所示：

<body ng-controller="myCtrl">
  <h1>Hello Plunker!</h1>
  <ul>
    <li ng-repeat = "guy in  guys">
      <a ui-sref="person">{{guy}}{{$index+1}}</a>
    </li>
  </ul>
</body>

输出如下：

你好笨蛋！

文件 1
文件 2
文件3

我的 angular 代码如下所示：

var app = angular.module('app', ['ui.router']);

app.controller('myCtrl', function($scope) {
  $scope.val = "This is my Message..."
  $scope.guys = ['File1','File2','File3']
});

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('person{something needs to be here}', {
        url: "/route1",
        templateUrl: "file1.html"
    })
    .state('person{something needs to be here}', {
        url: "/route2",
        templateUrl: "file2.html"
    })    
})

有人可以帮助解决这里需要填充的内容吗？我的目标是单击文件 1 应该打开 file.html，单击文件 2 应该打开 file2.html

简而言之，我的问题是如何在单击 ng-repeat 指令中重复的项目时打开不同的 files/templates/partials 以及如何在 [=15= 状态下指定 url 参数]

非常感谢

http://plnkr.co/edit/p6Qlzh7XjjeXUJ5I8Z8h?p=preview

Answer 1

只使用一个带有参数的路由：

.state("person", {
    url: "/person/:file",
    ....
});

然后在模板控制器中使用$stateParams 获取文件参数，使用$http 加载html 内容并将结果放入ng-bind-html 标签属性中。

Answer 2

我创建了一个updated plunker here

状态看起来像这样：

.state('guy_route2', {
    url: "/route/{index:int}",
    templateProvider: function($templateRequest, $stateParams) {

      var index = $stateParams.index + 1;
      var templateName = 'file' + index + '.html';

      return $templateRequest(templateName);
    },
})

这将是正文：

<body ng-controller="myCtrl">  

  <ul>
    <li ng-repeat = "guy in guys">
      <a ui-sref="guy_route2({index: $index})">{{guy}}</a>
    </li>
  </ul>


 <h3>Target for state</h3>

 <div ui-view=""></div>
</body>

查看我们各州的基本目标 <div ui-view=""></div>。 ui-sref：

 ui-sref="guy_route2({index: $index})"

我们在其中传递状态名称 'guy_route2'，函数调用包含表示状态参数的对象 ({index: $index})

检查所有 here

templateProvider "magic" 详情可在此处找到：

延长：

有了收音机我会调整它like this

  <h3>radio</h3>
  <ul>
    <li ng-repeat="guy in guys">
      <input type="radio" 
      value="{{$index}}"
      ng-model="Model.selected" 
      ng-change="go(Model.selected)" 
      id="something{{$index}}"
      /><label for="something{{$index}}">{{guy}}</label>
    </li>

  </ul>

和 go 函数

$scope.Model = { selected: null }; 
$scope.go = function(index){ 
    $state.go('guy_route2', {index: index}) ;}
});

检查一下here

Answer 3

如 comments here 中所述，我们甚至可以使用 resolve。

有a working plunker

这可能是 data.json

[
    {
    "id":1,
    "name":"Someone 1"
    },
    {
    "id":2,
    "name":"Someone 2"
    },
    {
    "id":3,
    "name":"Someone 3"
    }
]

这些状态定义将使用该文件生成列表和详细信息。 Parent 状态与解决

  .state('guys', {
    url: "/route",
    templateUrl:'guys.html',
    controller:'listCtrl',
    resolve: { 
      guys: ['$http', function($http){
        return $http
            .get("data.json")
            .then(function(response){
              return response.data; 
            })
      }],
    }
  })

和 child 模板由传递的 id 驱动：

  .state('guy', {
    parent: 'guys',
    url: "/:id",
    controller:'MyCtrl',
    templateProvider: function($templateRequest, $stateParams) {

      var index = $stateParams.id;
      var templateName = 'file' + index + '.html';

      return $templateRequest(templateName);
    },
  })

这应该说明如何使用 UI-Router 和 resolve

检查一下here

另见

Angularjs ui-router abstract state with resolve

我如何在 angularjs UI-Router 中为 ng-repeat 中的项目路由到不同的 URL，需要修改 ui-router 中的状态

How can I route to different URLS in angularjs UI-Router for items in ng-repeat, Need to modify state in ui-router

javascript

angularjs

angular-ui-router

angularjs-routing