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

0

FirstCtrlビューが変更されると、もう一度インスタンス化されます。

コントローラーのスコープで selectedValue を設定する代わりに。rootScope に設定して使用します。

これが更新されたフィドルです。http://jsfiddle.net/k66Za/89/

于 2015-02-26T12:33:35.633 に答える
0

このフィドルのように、コントローラーの開始をルートから削除して、アプリケーションの上部に追加できます: 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">
于 2015-02-26T12:40:17.813 に答える