1

我正在玩 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没有在“详细信息”页面上呈现/显示？

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

4

3 回答 3

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

工作小提琴

于 2015-02-26T12:43:18.160 回答
0

您可以从路由中删除控制器启动并将其添加到应用程序的顶部，如下面的小提琴： 小提琴更新

然后它只会启动一次。

在 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">
于 2015-02-26T12:40:17.813 回答
0

FirstCtrl当视图改变时会再实例化一次。

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

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

于 2015-02-26T12:33:35.633 回答