AngularJS路線幫手

任何想法如何構建解決方案，有助於在更方便的方式生成視圖URL，而不是硬編碼這樣的：AngularJS路線幫手

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

我想用：

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

因此它會檢查路線併爲每條路線生成特定指令。

我對儘可能最通用的解決方案感興趣。所有的

來源

2014-06-13 dubadub

我會強烈建議您使用UI的路由器，它的$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路由器：https://github.com/angular-ui/ui-router

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

來源

2014-06-23 09:25:39

首先，你可以使用角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; 
})

來源

2014-06-13 11:55:31 Tek

你需要遍歷所有路由和動態建立指令，這裏是一個開始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' 
    }); 
});

來源

2014-06-13 11:58:32

看起來不錯，但我怎麼能提取特定的控制器代碼？ – dubadub

我沒有得到你的問題，你指的是什麼代碼？ –

我的意思是'MainCtrl'中的所有代碼。可能是創建提供程序，將生成所有指令？ – dubadub

或者你可以創建指令（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/>" 

    }; 

});

來源

2014-06-13 12:02:53 sylwester

AngularJS路線幫手

回答

相關問題