<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Title</title>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
</head>
<body>
<p ui-view></p>
<script type="text/javascript">
var testApp = angular.module('testApp', ['ui.router']);
testApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
template: '<ul><li ng-repeat="item in items" data-id="{{item.id}}">{{item.name}}</li></ul>',
controller: function($scope, $state){
$scope.items = [
{
name: '张三',
id: 1
},
{
name: '李四',
id: 2
},
{
name: '王五',
id: 3
}
];
$(function(){
$('li').click(function(){
console.info($(this).data('id'));
var id = $(this).data('id');
$state.go('index.detail', {
id: id
});
});
})
}
})
.state('index.detail', {
url: ':id',
template: '<h1>This is detail</h1>'
})
});
</script>
</body>
</html>就是为什么我点击li的时候他不会跳转页面呢？地址栏是没错的啊？
PHPz2017-04-10 17:02:23
盗用了文档的代码，你为何不这样做呢？
$stateProvider
.state('contacts', {
abstract: true,
url: '/contacts',
templateUrl: 'contacts.html',
controller: function($scope){
$scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
}
})
.state('contacts.list', {
url: '/list',
templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
url: '/:id',
templateUrl: 'contacts.detail.html',
controller: function($scope, $stateParams){
$scope.person = $scope.contacts[$stateParams.id];
}
})
<!-- contacts.html -->
<h1>Contacts Page</h1>
<p ui-view></p>
<!-- contacts.list.html -->
<ul>
<li ng-repeat="person in contacts">
<a ng-href="#/contacts/{{person.id}}">{{person.name}}</a>
</li>
</ul>
<!-- contacts.detail.html -->
<h2>{{ person.name }}</h2>
