AngularJS не может перейти на другую страницу

У меня есть простой веб-проект с списком телефонов, и каждый элемент в этом списке содержит подробную информацию о телефоне. Если бы я нажал на идентификатор телефона, это должно было привести меня к странице только для этого телефона, однако ничего не произошло после нажатия на идентификатор телефона.AngularJS не может перейти на другую страницу

Когда приложение было загружено, он пошел на индексную страницу с URL:

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

После того как я нажал на первый телефонный идентификатор, URL-адрес был изменен на следующий, но он не сделал перейти на эту страницу на всех:

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>

источник

2017-02-14 jlp

Вы пытались изменить href на ng-href? '{{phone.name}}' –

Вы забыли добавить ! в атрибуте href.

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

источник

2017-02-14 23:04:40

Это сработало. Спасибо! – jlp

AngularJS не может перейти на другую страницу

ответ

Смежные вопросы