2017-02-14 59 views
0

我有一个简单的Web项目,有一个电话列表,该列表中的每个元素都包含电话详细信息。如果我点击了电话号码,它应该会将我带到仅用于该电话的页面,但是,在点击电话号码后没有任何事情发生。AngularJS无法路由到不同的页面

当加载应用程序,它去到索引页面的URL:

http://localhost:8080/angular-route-multiple-views/index.html#!/phones

我点击了第一个电话号后,网址变更为以下但事与愿违进入该页面所有:

http://localhost:8080/angular-route-multiple-views/index.html#!/phones#%2Fphones%2Fnexus

是否有人可以帮助,让我知道它为什么没有去电话详细页面?谢谢。

的index.html

<!DOCTYPE html> 
<html ng-app="mainModule"> 
<head> 
<meta charset="ISO-8859-1"> 
<title>AngularJS Demo</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script> 
<script src="js/main-module.js"></script> 
<script src="js/phonelist-module.js"></script> 
<script src="js/phonelist-component.js"></script> 
<script src="js/config.js"></script> 
<script src="js/phonedetail-module.js"></script> 
<script src="js/phonedetail-component.js"></script>   
</head> 
<body> 
    <div ng-view></div> 
</body> 
</html> 

主module.js:

angular.module('mainModule', ['ngRoute', 'phoneList', 'phoneDetail']); 

config.js:

angular.module('mainModule'). 
config(['$locationProvider', '$routeProvider', 
     function config($locationProvider, $routeProvider) { 
     $locationProvider.hashPrefix('!'); 

     $routeProvider. 
     when('/phones', { 
     template: '<phone-list></phone-list>' 
     }). 
     when('/phones/:phoneId', { 
     template: '<phone-detail></phone-detail>' 
     }). 
     otherwise('/phones'); 
    } 
]); 

PHONELIST-module.js:

angular.module('phoneList', ['ngRoute']); 

PHONELIST-component.js:

angular.module('phoneList').component('phoneList', { 
templateUrl: 'js/phone-list.template.html', 
    controller: function PhoneListController() { 
    this.phones = [ 
    { 
     id: 'nexus', 
     name: 'Nexus S', 
     snippet: 'Fast just got faster with Nexus S.', 
    }, 
    { 
     id: 'motorola-xoom', 
     name: 'MOTOROLA XOOM™', 
     snippet: 'The Next, Next Generation tablet.', 
    } 
    ]; 
} 
}); 

phonedetail-module.js:

angular.module('phoneDetail', ['ngRoute']); 

phonedetail组分。 js:

angular.module('phoneDetail'). 
    component('phoneDetail', { 
    template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>', 
    controller: ['$routeParams', 
    function PhoneDetailController($routeParams) { 
     this.phoneId = $routeParams.phoneId; 
    } 
    ] 
}); 

电话list.template.html:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Phone List</title> 
</head> 
<body> 
    <li ng-repeat="phone in $ctrl.phones" > 
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a> 
    <p>{{phone.snippet}}</p> 
    </li> 
</ul> 
</body> 
</html> 
+1

您是否尝试将href更改为ng-href? '{{phone.name}}' –

回答

1

你忘了在href属性添加!

<ul> 
    <li ng-repeat="phone in $ctrl.phones"> 
     <a href="#!/phones/{{phone.id}}">{{phone.name}}</a> 
     <p>{{phone.snippet}}</p> 
    </li> 
</ul> 
+0

这工作。谢谢! – jlp

相关问题