问题描述
我之前使用ng-route进行了正常工作,但是使用UI Router,链接不再可单击,或者至少在大多数情况下不可单击.当它们是随机的时,它们不显示我正在使用的html模板.
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;
});
我正在按照AngularJS上的SitePoint电子书中的说明进行操作,因此我不确定自己做错了什么或错过了什么.
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
推荐答案
我在您的标记中的任何地方都看不到ui-view
,因此您的状态视图很可能不会被渲染和注入.
I don't see a ui-view
anywhere in your markup, so your states' views are most likely not being rendered and injected.
您不需要ng-view
.您的主HTML文件中应该存在一个ui-view
.您的顶级状态将被渲染并注入到那里.状态可以具有子状态,并且具有子状态的状态的每个模板都应具有其自己的ui-view
,并将其呈现的子状态注入其中.
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.
浏览 ui-router
的自述文件有关使其正常运行的基础知识.此外,他们还有一个很好的演示应用,其来源确实对我有所帮助了解此状态路由引擎的含义以及如何使用它.
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.
这篇关于ui-sref无法生成可点击的链接/不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!