UI路由器點不工作

的UI，路由器的文檔顯示，你可以在路徑名稱中使用點：UI路由器點不工作

<!-- partials/state1.html --> 
<h1>State 1</h1> 
<hr/> 
<a ui-sref="state1.list">Show List</a> 
<div ui-view></div>

但是，無論在我的應用程序，這並不工作。這是工作的罰款，直到我換到client到處client.ts一個例子：

<!DOCTYPE html> 
<html ng-app="myapp"> 

<head> 
    <title>AngularJS: UI-Router Quick Start</title> 
    <!-- Bootstrap CSS --> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 

<body class="container"> 

    <div class="navbar"> 
    <div class="navbar-inner"> 
     <a class="brand" ui-sref="index">Quick Start</a> 
     <ul class="nav"> 
     <li><a ui-sref="index">Home</a></li> 
     <li><a ui-sref="clien.ts">Clients</a></li> 
     <li><a ui-sref="route1">Route 1</a></li> 
     </ul> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="span6"> 
     <div class="well" ui-view=""></div>   
    </div> 
    <div class="span6"> 
     <div class="well" ui-view="viewB"></div>   
    </div> 
    </div>   

    <!-- Angular --> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script> 
    <!-- UI-Router --> 
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> 

    <!-- App Script --> 
    <script> 
    var myapp = angular.module('myapp', ["ui.router"]) 
    myapp.config(function($stateProvider){ 
    $stateProvider 
     .state('index', { 
      url: "", 
      views: { 
       "": { 
        template: "index.viewA-index" 
       }, 
       "viewB": { 
        template: "index.viewB" 
       } 
      } 
     }) 
     .state('route1', { 
      url: "/route1", 
      views: { 
       "": { 
        template: "route1.viewA-route1" 
       }, 
       "viewB": { 
        template: "route1.viewB" 
       } 
      } 
     }) 
     .state('clien.ts', { 
      url: "/clients", 
      views: { 
       "viewB": { 
        template: "clients.viewA-route2" 
       }, 
       "": { 
        controller: function($scope, ClientService) { 
         console.log('Controller code being run'); 
         $scope.clients = ClientService.clientList(); 
        }, 
        templateUrl: 'client-list-template.html' 
       } 
      } 
     }) 
    }) 
    .service('ClientService', function() { 
     this.clientList = function() { 
     clients = [{'name': 'Acme Food', 'description': 'Makers of fine food'}, 
        {'name': 'Dog Biscuits Inc', 'description': 'Cruncy creations for canines'}, 
        {'name': 'Parrot treats Ltd', 'description': 'Puveyors of bird food'}, 
        {'name': 'Pond supplies', 'description': 'Sell fish and gravel'}]; 
     return(clients); 
     } 
    }); 
    </script> 

</body> 

</html>

Plunker這裏：http://plnkr.co/edit/ZD7WlC9aKzpwte9dVMxC?p=preview

正如你所看到的鏈接無法點擊可以：/

來源

2014-10-17 Vinz243

你需要什麼在這種情況下，要爲clien添加抽象狀態。

這裏的plunkr，與添加的狀態：plunkr

每當你定義一個點的狀態。您仍然至少需要爲孩子定義抽象狀態。在你的情況下爲clien。

也未嘗從docs

如果只註冊一個單一的國家，像contacts.list，你必須在某一點定義一個名爲聯繫人狀態，否則就沒有狀態將被註冊。狀態contacts.list將排隊，直到定義聯繫人。如果你這樣做，你不會看到任何錯誤，所以要小心你定義的父母爲了讓孩子得到正確的註冊。

來源

2014-10-17 21:03:03

你甚至不需要我寫在那裏的絕對狀態。但是你仍然需要在兒童可以添加內容的地方編寫新的'ui-view'元素。 [另類plunkr]（http://plnkr.co/edit/MxWY1LNaZIsY3ItMJhYV?p=preview） – 2014-10-17 21:05:23

該死的，你打敗了我。那肯定會是我的狂熱http://plnkr.co/edit/nf0yrnbEydmRH3Pfk6e6?p=preview！沒有理由使用一個子狀態，如果沒有父母的話;-) – jfornoff 2014-10-17 21:48:30

雖然你的例子有效，但是OP特別詢問了爲什麼在將'clients'改爲'clien.ts'後它不起作用。他已經知道它的工作沒有點。 – 2014-10-17 21:53:44

UI路由器點不工作

回答

相關問題