UI-라우터 점

UI를-라우터 문서는 경로 이름에 점을 사용할 수 있음을 보여줍니다 작동하지 :UI-라우터 점

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

하지만 내 응용 프로그램이 작동하지 않는 그러나합니다. 여기

<!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을 : 이것은 내가 사방 client.ts에 client을 변경할 때까지 잘 작동 예입니다 http://plnkr.co/edit/ZD7WlC9aKzpwte9dVMxC?p=preview

해당 링크를 클릭 할 수 없습니다 볼 수 있듯이 :/

출처

2014-10-17 Vinz243

는 당신이 필요로하는 무엇 그럴 경우 clien에 대한 추상 상태를 추가하십시오.

여기에 추가 된 상태를 사용하여 plunkr입니다 :

는 점으로 상태를 정의 할 때마다 plunkr. 여전히 최소한 아이의 추상 상태를 정의해야합니다. 귀하의 경우에는 clien입니다. 당신이 contacts.list 같은 단 하나의 상태를 등록 할 경우 docs

에서 또한

무엇인가, 당신은 어떤 점에서 접촉이라는 상태를 정의해야한다, 또는 다른 어떤 상태는 등록되지 않습니다. 연락처가 정의 될 때까지 상태 contacts.list는 대기열에 들어갑니다. 이렇게하면 오류가 표시되지 않으므로 자녀를 올바르게 등록하려면 부모를 정의해야합니다.

출처

2014-10-17 21:03:03

내가 작성한 절대 상태가 필요하지 않습니다. 그러나 자식이 콘텐츠를 추가 할 수있는 곳에 새로운 ui-view 요소를 작성해야합니다. [대체 plunkr] (http://plnkr.co/edit/MxWY1LNaZIsY3ItMJhYV?p=preview) –

젠장, 너는 나를 때려. 그건 내 plunkr http://plnkr.co/edit/nf0yrnbEydmRH3Pfk6e6?p=preview되었습니다! 부모가 없다면 하위 상태를 사용하지 않아야합니다 ;-) – jfornoff

예제가 작동하는 동안 OP는 'clients'를 'clien.ts'로 변경 한 후 왜 작동하지 않는지 구체적으로 질문했습니다. 그는 이미 그것이 점없이 일하고 있다는 것을 알고있었습니다. –

UI-라우터 점

답변

관련 문제