angularjs – Ui-sref不生成可点击的链接/不工作

发布时间：2020-12-17 07:29:34 所属栏目：安全来源：网络整理

导读：之前我使用过ng-route并且工作正常,但是使用UI路由器,链接不再可以点击,或者至少大部分时间它们都没有.当它们是非常随机的时,它们不会显示我正在使用的html模板. HTML： head titleTutorial/title script src="lib/angular/angular.js"/script script src="l

之前我使用过ng-route并且工作正常,但是使用UI路由器,链接不再可以点击,或者至少大部分时间它们都没有.当它们是非常随机的时,它们不会显示我正在使用的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',$stateParams,names) {
    $scope.firstname = $stateParams.firstname;
    $scope.lastname = $stateParams.lastname;
    $scope.names = names;

});

我正在按照AngularJS上的SitePoint电子书中的说明进行操作,所以我不确定我做错了什么或错过了什么.

http://plnkr.co/edit/amh3nZmyB7lC2IQi3DIn

我没有在你的标记中的任何地方看到ui-view,因此你的状态视图很可能不被渲染和注入.

你不应该需要ng-view.主HTML文件中应存在单个ui视图.您的顶级状态将被渲染并注入其中.状态可以有子状态,并且具有子状态的状态的每个模板应该具有其自身的ui视图,其中将呈现其呈现的子状态.

通过ui-router‘s readme查看使其正常工作的基础知识.此外,他们有一个很好的demo app,其来源真正帮助我了解这个状态路由引擎是什么以及如何使用它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!