Question

如何构建解决方案的任何想法，有助于以更方便的方式生成视图中的URL，而不是像这样的硬编码：

<a ng-href="#/Book/{{item.bookId}}/ch/{{item.id}}">Chapter {{item.id}}</a>

我想用：

<a chapters="[item.bookId, item.id]">Chapter {{item.id}}</a>

因此它检查路由并为每个路由特定指令生成。

我对最通用的解决方案感兴趣。

Answer 1

我强烈建议您使用ui-router及其$stateProvider。

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

app.config(function ($stateProvider) {
  $stateProvider
    .state('book', {
      url: '/Book/:bookId'
    })
    .state('book.chapter', {
      url: '/ch/:id'
    });
});

<a ui-sref="book.chapter({bookId: item.bookId, id: item.id})">Chapter {{item.id}}</a>

沿着这些方向做某事应该可以解决问题。我完全不熟悉应用程序的其他参数，但使用传入的参数构建动态URL以匹配$state是一件轻而易举的事。

ui-router：https://github.com/angular-ui/ui-router

ui-sref（指令）：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Answer 2

首先，您可以使用Angular-UI Angular-UI/UI-Router

在那里的主要想法是拥有州，因为你有单页应用程序，一切都只是在一个地方呈现的状态。什么都不刷新。

集成时，您可以创建

$stateProvider
      .state("bookPreview", {
        url: "/book/:id/:itemId",
        controller: "BookPreviewCtrl",
        templateUrl: 'sb/add-cpe-template.tpl.html'
      });

在您的HTML中，您可以执行以下操作：

<button ng-click="view(item.bookId, item.id)">Chapter {{item.id}}</button>

或类似的东西，你也可以指定ng-点击超链接。

java脚本视图功能是:(但在你必须注入$

之前

controller("BookSelectionCtrl",function($scope,$state){

  //this will rewrite the url , go to the state and load the template(view).
  $scope.view=function(bookId,itemId){
    $state.go("bookPreview",{id:bookId,itemId:itemId}) //there is a third object representing options, which are optional and you can check them on doc site
  }   

})

controller("BookPreviewCtrl",function($scope,$stateParams){
   //in this new ctrl of the new view you can now do what ever you want with these params
   $scope.bookId = $stateParams.id;
   $scope.itemId = $stateParams.itemId; 
})

Answer 3

您需要循环遍历所有路由并动态构建指令，这是一个开始http://plnkr.co/edit/d592a58CMan5BVKQYSAy?p=preview

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

app.controller('MainCtrl', function($scope,$route) {
  var keys = [];
  for(var k in $route.routes) keys.push(k);
  $scope.name = keys;
  for (var i=0; i<keys.length; ++i) {
    app.directive('SomethingDynamic', function() {
      return {
        restrict: 'A',
        replace: true,
        template: '....',
      };
    });
  }
});

app.config(function ($routeProvider) {
  $routeProvider.
    when('/complex/:name/:color/:number/extra', {
      templateUrl: "404.html",
      name:'complex'
    }).
    when('/objects', {
      templateUrl: "404.html",
      name:'list'
    }).
    when('/object/detail/:id', {
      templateUrl: "404.html",
      name:'detail'
    });
});

Answer 4

或者您可以创建指令（jsbin）：

查看：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="mainCtrl">

<book-link book="book" ng-repeat="book in books"></book-link>
  </div>
</body>
</html>

JS：

var app = angular.module("app",[])
.controller("mainCtrl", function($scope){

  var books = [
    {bookId : "book1", id:"1" },
    {bookId : "book1", id:"2" },
    {bookId : "book1", id:"3" }
  ];

  $scope.books = books;


})

.directive("bookLink",function(){

  return {
    restrict:"E",
    scope:{book:'='},
    template:"<a href='/book/{{book.bookId}}/ch/{{book.id}}'>Chapter {{book.id}}</a><br/>"

  };

});

AngularJS路线助手

4 个答案: