可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I used ng-route for this before and it worked fine, but with UI Router, the links are not clickable anymore, or at least most of the time they aren't. When they are, which is very random, they don't display the html templates I'm using.

HTML:

<head>
    <title>Tutorial</title>

    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

</head>

<body>

   <ng-view></ng-view>

    <ul class="menu">
        <li><a ui-sref="view1">view1</a></li>
        <li><a ui-sref="view2">view2</a></li>
    </ul>

.js

angular.module('myApp', [
    'myApp.controllers',
    'ui.router'
    ]);

angular.module('myApp').config(function($stateProvider, $urlRouterProvider) {

    $stateProvider.state('view1',{
        url: '/view1',
        controller:'Controller1',
        templateUrl:'/view1.html' 
    }).state('view2', {
        url: '/view2/:firstname/:lastname',
        controller: 'Controller2',
        resolve: {
            names: function() {
                return ['Misko', 'Vojta', 'Brad'];
            }
        },
        templateUrl: '/view2.html'
    });

    $urlRouterProvider.otherwise('/view1');

});


angular.module('myApp.controllers', []).controller('Controller1', function($scope, $location, $state) {

    $scope.loadView2=function() {
        $state.go('view2', {
            firstname: $scope.firstname,
            lastname: $scope.lastname
        });
    };
}).controller('Controller2', function($scope, $stateParams, names) {
    $scope.firstname = $stateParams.firstname;
    $scope.lastname = $stateParams.lastname;
    $scope.names = names;

});

I'm following the instructions in the SitePoint ebook on AngularJS, so I'm not really sure what I'm doing wrong or what I missed.

http://plnkr.co/edit/amh3nZmyB7lC2IQi3DIn

回答1:

I don't see a ui-view anywhere in your markup, so your states' views are most likely not being rendered and injected.

You should not need ng-view. A single ui-view should exist in your main HTML file. Your top level states will be rendered and injected there. States can have substates, and each template of a state which has a substate should have a ui-view of its own where its rendered substates will be injected.

Look through ui-router's readme for the basics of getting it working. Also, they have a good demo app, the source of which really helped me understand what this state routing engine is about and how to use it.

回答2:

Helpful info, hopefully...

Although the answers above are correct (missing ui-view, referencing ui.router, etc.), I have run into situations where other problems with the load of a view will cause links to not be generated. For example, this morning I forgot to reference the module angular-cache and was running into a problem with CacheFactory not loading (completely unrelated to ui.router). Until the references were resolved, ui.router was dead in the water.