如何使用 AngularJS 在视图之间传递项目？答案

【问题标题】：How do i pass an item between views with AngularJS?如何使用 AngularJS 在视图之间传递项目？
【发布时间】：2015-04-28 19:55:49
【问题描述】：

我正在使用 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;
    }
});

Link to JSfiddle Here

【问题讨论】：

标签： angularjs angularjs-scope ngroute angularjs-ng-route

【解决方案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];
            }
        }
    }
});

Working Fiddle

【讨论】：

【解决方案2】：

您可以从路由中删除控制器启动并将其添加到应用程序的顶部，如下面的小提琴： 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">

【讨论】：

【解决方案3】：

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

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

这是更新的小提琴。 http://jsfiddle.net/k66Za/89/

【讨论】：