如何在 AngularJS 的视图之间传递项目？

Question

我正在尝试使用 ngRoute 和 Angular，当我尝试在视图中选择一个项目以便转到包含 coshed 项目的详细信息页面时似乎遇到了问题：

<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 不是 "details" 页面上的 rendered/shown？

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;
    }
});

Link to JSfiddle Here

Answer 1

FirstCtrl 将在视图更改时再实例化一次。

而不是在控制器范围内设置 selectedValue。在 rootScope 上设置它并使用它。

这是更新后的 fiddle。 http://jsfiddle.net/k66Za/89/

Answer 2

您可以从路由中删除控制器启动并将其添加到应用程序的顶部，如此 fiddle 所示： Fiddle update

那么只会启动一次

在 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">

Answer 3

您没有看到更改，因为当您切换视图时，会启动一个新的控制器实例，而您不知道您选择了什么。

由于您使用的是 $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];
            }
        }
    }
});

Working Fiddle

如何在 AngularJS 的视图之间传递项目？

How do i pass an item between views with AngularJS?

angularjs

angularjs-scope

ngroute

angularjs-ng-route