Как определить маршрутизацию для перехода на страницу сведений при нажатии ссылки

Мне нужна помощь в реализации страницы списка и деталей.Как определить маршрутизацию для перехода на страницу сведений при нажатии ссылки

У меня есть motorList.html страница, где я перечисляю все двигатели как hyperlink, извлеченные с сервера (базы данных).

motorList.html

<div> 
    <ul class="phones"> 
     <li ng-repeat="motor in motors" > 
      <a href="#/motors/{{motor.Id}}">{{motor.Name}} 
     </li> 
    </ul> 
</div>

Я хочу, когда пользователь нажимает на любую ссылку двигателя, система должна перейти на motorDetails.html страницу и показать детали для щелкнули/выбранного двигателя.

Для этого я определил мои маршруты, следующие в app.js

app.js

app.config(['$routeProvider', 
    function ($routeProvider) { 
     $routeProvider. 
     when('/motors', { 
      templateUrl: 'View/motorlist.html', 
      controller: 'motorController' 
     }). 
     when('/motors/:motorId', { 
      templateUrl: 'View/motordetail.html', 
      controller: 'motorDetailsController' 
     }). 
     otherwise({ 
      redirectTo: '/motors' 
     }); 
    }]);

motorDetails.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <div> 
     <ul class="phones"> 
      <li ng-repeat="motor in motors" class="thumbnail"> 
       <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p> 
      </li> 
     </ul> 
    </div> 
</body> 
</html>

motorDetailsController.js

var app = angular.module('myApp', ['ngSanitize', 'ui.select']); 
app.controller('motorDetailsController', function ($scope, $routeParams, motorService) { 

    $scope.motors = null; 

    $scope.getMotorDetails = function (Id) { 
     motorService.getByMake(Id) 
      .success(function (motors) { 
       $scope.motors = motors; 
      }) 
     .error(function (error) { 
      $scope.status = 'Unable to load motor data: ' + error.message; 
     }); 
    } 
});

Проблема: Когда я нажимаю на любой автомашине гиперссылкой, не перейти на motorDetails.html страницу, но изменения URL, например http://localhost:12270/View/motorList.html#/motors/161.

Я новичок в маршрутизации AngularJs, и, конечно, я что-то пропустил, но не уверен, что не так.

Может ли кто-нибудь мне помочь. Спасибо

источник

2015-12-05 simbada

Где вы имеете 'нг-view'? – Arg0n

У меня нет и не знаю, где я должен это определить и что он делает. Можете ли вы мне помочь? – simbada

См. Ответ от Pankaj. Вы размещаете его там, где хотите, чтобы ваш шаблон загружался. – Arg0n

Это потому, что href является обычным атрибутом и не оценивается угловыми. Чтобы сделать это выражение желаемой ссылкой, вы должны использовать ng-href, поэтому angularJs будет выкапывать выражение и назначать его href html attirbute.

Вы должны изменить

href="#/motors/{{motor.Id}}"

ng-href="#/motors/{{motor.Id}}"

Кроме того, чтобы получить его идентификатор. вы должны использовать $routeParams в контроллере. Например:

var id = $routeParams.motorId

UPDATE я пропустил это, но @Pankaj Parkar право. Вы должны использовать ng-view, чтобы сделать routeProvider, чтобы присвоить соответствующий вид правильному заполнителю.

Как пользоваться ng-view? Вы должны создать элемент, в котором вы хотите отобразить представление. Это может быть часть страницы или всей страницы. Поместите элемент туда, где вы хотите, и вы поймете.

Например:

<body> 
    <div id="nav"> 
    </div> 
    <ng-view> 
    <!-- this is the place your html template will apear --> 
    </ng-view> 
</body>

источник

2015-12-05 16:33:57 Dvir

Если я пропустил что-то, но ваше решение не сработало для меня. – simbada

Не могли бы вы взглянуть на мой последний комментарий, отправленный в комментарии Pankaj? – simbada

Вы должны добавить директиву ng-view на странице, которая будет показывать template загруженную из $routeProvider, наблюдая за URL. Вам нужно добавить директиву ng-view где-то в вашем теле.

Кроме того, вы должны включить изменения, предложенные @Dvir.

Markup

<body> 
    <div> 
     <ul class="phones"> 
      <li ng-repeat="motor in motors" class="thumbnail"> 
       <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p> 
      </li> 
     </ul> 
    </div> 
    <div ng-view></div> 
</body>

Update

В идеале вы должны иметь ng-view директиву там в motorList.html, который будет загружаться (Но я рассматривать его как страницы index.html, где все css & js есть ссылки)

Также вам не нужно включать html, head & body тег в partial, как его будет рассматривать как частичное, так удалить body, head & html тег и сделать его простым путем размещения только нужный шаблон.

motorDetails.html

<div> 
    <ul class="phones"> 
     <li ng-repeat="motor in motors" class="thumbnail"> 
      <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p> 
     </li> 
    </ul> 
</div>

источник

2015-12-05 16:36:00

благодарит вас, где именно мне нужно иметь этот тег? – simbada

@simbada вы посмотрели мое редактирование в ответ? –

Только что проверил и подтвердил ваш ответ. пожалуйста, дайте мне несколько секунд. – simbada

Как определить маршрутизацию для перехода на страницу сведений при нажатии ссылки

ответ

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