Ui-sref 不生成可点击的链接/不工作答案

【问题标题】：Ui-sref not generating clickable links/not workingUi-sref 不生成可点击的链接/不工作
【发布时间】：2016-07-12 02:56:47
【问题描述】：

我之前使用过 ng-route 并且效果很好，但是使用 UI Router，链接不再可点击，或者至少大部分时间都不可点击。当它们是非常随机的时，它们不会显示我正在使用的 html 模板。

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;

});

我正在按照关于 AngularJS 的 SitePoint 电子书中的说明进行操作，所以我不确定自己做错了什么或错过了什么。

http://plnkr.co/edit/amh3nZmyB7lC2IQi3DIn

【问题讨论】：

我在你的标记中没有看到ui-view，所以你的状态视图很可能没有被渲染和注入
@JAAulde 我应该使用它而不是 ng-view 还是与它结合使用？
一个ui-view 应该存在于您的主 HTML 文件中。您的顶级状态将在那里渲染和注入。你不应该需要ng-view。状态可以有子状态，每个具有子状态的状态模板都应该有一个ui-view，其渲染的子状态将被注入。
太好了，谢谢！现在工作正常。
查看ui-router 的自述文件以了解如何使用它：github.com/angular-ui/ui-router/blob/master/README.md。此外，他们有一个很好的演示应用程序，您可以下载并查看它，它确实帮助我了解了这个状态路由引擎的内容以及如何使用它。

标签： angularjs angular-ui-router

【解决方案1】：

我在您的标记中没有看到ui-view，因此您的状态视图很可能没有被渲染和注入。

您不需要ng-view。您的主 HTML 文件中应该存在一个 ui-view。您的顶级状态将在那里渲染和注入。状态可以有子状态，每个具有子状态的状态模板都应该有一个自己的ui-view，其渲染的子状态将被注入。

查看ui-router's readme 了解使其正常工作的基础知识。另外，他们有一个很好的demo app，它的来源确实帮助我理解了这个状态路由引擎是关于什么以及如何使用它。

【讨论】：

【解决方案2】：

有用的信息，希望...

虽然上面的答案是正确的（缺少ui-view，引用ui.router 等），但我遇到了其他视图加载问题会导致无法生成链接的情况。例如，今天早上我忘记引用模块angular-cache 并且遇到了CacheFactory 未加载的问题（与ui.router 完全无关）。在解决引用之前，ui.router 已死在水中。

【讨论】：

这对我有帮助。我遇到了一个不相关的错误（空检查），它阻止了 ui-sref 的默认行为。谢谢！