Правильный формат для маршрутизации по Id в AngularJS

Question

Я использую следующий маршрут в AngularJS:

  .when("/content/:id", {
    templateUrl : "templates/content.html",
    controller : "content"
  })

и следующий контроллер:

app.controller('menu', function($scope, $http) {
    $http.get('api address')
    .then(function(response) {
        scope.navi = response.data.body;
        $scope.selectCourse = function(course, index, path) {
            location.href=path
            $scope.content = response.data.body[index]
        };     
    });
});

Контроллер генерирует templateURL в следующем формате:

#!content/2  //where '2' is a dynamic variable that changes with each menu item

Вот мой вопрос:

Это правильный формат для использования переменной в templateUrl?

"/content/:id"

В настоящее время каждый пункт меню идет по адресу:

http://127.0.0.1:5500/index.html#!/content/1
http://127.0.0.1:5500/index.html#!/content/2
http://127.0.0.1:5500/index.html#!/content/3

Но содержимое не изменяется в шаблоне по мере необходимости. Кстати, в console.log все работает так, как нужно, поэтому я думаю, что у меня есть проблема с простым форматированием или синтаксисом в том, как я форматирую ссылки.

Answer 1

Используйте сервис $location для перехода к новому представлению:

app.controller('menu', function($scope, $http, $location) {

    $scope.selectCourse = function(course, index) {
        ̶l̶o̶c̶a̶t̶i̶o̶n̶.̶h̶r̶e̶f̶=̶p̶a̶t̶h̶
        $scope.content = $scope.navi[index];
        var path = "/content/" + course.id;
        $location.path(path);
    };     

    $http.get('api address')
    .then(function(response) {
        $scope.navi = response.data.body;
    });
});

Для получения дополнительной информации см.

• AngularJS Руководство разработчика - С помощью службы $ location

---

UPDATE

просто нужно найти наилучший способ передачи индекса в контроллер содержимого, чтобы он контролировал, какие Элемент массива вызывается.

В контроллере содержимого используйте службу $routeParams, чтобы получить параметры для представления:

app.controller('content', function($scope, $http, $routeParams) {
    var contentId = $routeParams.id;
    var params = { contentId: contentId };
    var config = { params: params };
    $http.get('api address', config)
    .then(function(response) {
        $scope.content = response.data;
    });
});

Имейте в виду, что когда ngRoute маршрутизатор меняет представление, он уничтожает контроллер и область видимости для старого представления и создает новый контроллер и новую область видимости для нового представления. Любые данные в старой области будут потеряны, если они не будут сохранены в службе или переданы в качестве параметра в новое представление.