之前我使用过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电子书中的说明进行操作,所以我不确定我做错了什么或错过了什么.
我没有在你的标记中的任何地方看到ui-view,因此你的状态视图很可能不被渲染和注入.
你不应该需要ng-view.主HTML文件中应存在单个ui视图.您的顶级状态将被渲染并注入其中.状态可以有子状态,并且具有子状态的状态的每个模板应该具有其自身的ui视图,其中将呈现其呈现的子状态.
通过ui-router
‘s readme查看使其正常工作的基础知识.此外,他们有一个很好的demo app,其来源真正帮助我了解这个状态路由引擎是什么以及如何使用它.
原文地址:https://www.jb51.cc/angularjs/142160.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。