Question

UI-Router文档显示您可以在路径名称中使用点：

<!-- 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

如您所见，无法点击该链接：/

Answer 1

在这种情况下，您需要为clien添加一个抽象状态。

这是plunkr，添加了状态：plunkr

每当使用点定义状态时。您仍然需要至少为子项定义抽象状态。在您的情况下为clien。

来自docs

的内容

如果您只注册一个州，例如contacts.list，您必须在某个时刻定义一个名为contacts的状态，否则将不会注册任何州。状态contacts.list将排队，直到定义了联系人。如果你这样做，你不会看到任何错误，所以要小心你定义父母，以便孩子得到正确的注册。

ui-router点名不起作用

1 个答案: