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

Link to JSfiddle Here

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

Working Fiddle

Answer 2

当视图发生更改时，

FirstCtrl将再次实例化。

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

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

Answer 3

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

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

3 个答案: