Как передать элемент между видами с помощью AngularJS?

Question

Я играю с ngRoute и Angular, и мне кажется, что у меня возникла проблема при попытке выбрать элемент в представлении, чтобы перейти на страницу с подробностями с помощью элемента с разделителями:

<h1>Select Item</h1>
<ul>
   <li ng-repeat="item in vm.items">
      <a ng-click="vm.setSelectedItem(item)" ng-href="#/first/{{item.id}}">
           {{item.thing}}
      </a>
  </li>
</ul>

Как же vm.selectedItem не отображается / не отображается на странице "детали"?

var app=angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider){
    $routeProvider
    .when('/first', { 
        templateUrl: 'first.html', 
        controller: 'FirstCtrl',
        controllerAs:'vm' 
    })
    .when('/first/:id', {
        templateUrl: 'firstWithItem.html', 
        controller: 'FirstCtrl',
        controllerAs:'vm'
     })
    .otherwise({ 
        redirectTo: '/first' 
    });
});

app.controller("FirstCtrl", function() {
    var vm = this;

    vm.items = [{id:1, thing:"Beer"},{id:2, thing:"Grass"}];
    vm.selectedItem = null;
    vm.setSelectedItem = SetSelectedItem;

    function SetSelectedItem(item) {
        this.selectedItem = item;
    }
});

Ссылка на JSfiddle Здесь

Answer 1

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

Так как вы используете $routeProvider, ты можешь использовать $routeParams и использовать это, чтобы получить ваш id параметр:

app.controller("FirstCtrl", function($routeParams) {
    var vm = this;

    vm.items = [{id:1, thing:"Beer"},{id:2, thing:"Grass"}];
    vm.selectedItem = null;

    if ($routeParams.id) {      
        SetSelectedItem($routeParams, vm);
    }

    function SetSelectedItem(item, obj) {
         obj.selectedItem = findItem(item.id, obj.items);
    }

    function findItem(id, array) {
        var res;
        for (var i = 0; i < array.length; i++ )
        {
            if (array[i].id == id) {
                return array[i];
            }
        }
    }
});

Рабочая скрипка

Answer 2

FirstCtrl будет создан еще раз, когда представление будет изменено.

Вместо установки selectedValue в области видимости контроллера. Установите его на rootScope и используйте его.

Вот обновленная скрипка. http://jsfiddle.net/k66Za/89/

Answer 3

Вы можете удалить инициализацию контроллера из маршрутов и добавить его в начало приложения, как в этой скрипте: Обновление скрипта

Тогда это будет инициировано только один раз.

Редактировать в JS

app.config(function($routeProvider){
    $routeProvider
    .when('/first', { 
        templateUrl: 'first.html'
    })
        .when('/first/:id', {
        templateUrl: 'firstWithItem.html'
    })
    .otherwise({ 
        redirectTo: '/first' 
   });
});

Редактировать в HTML

<div ng-app="myApp" ng-controller="FirstCtrl as vm">