1

マスター/ディテール アプリを作成しようとしていますが、テンプレートでコントローラーの $scope 変数にアクセスできません。これは私のhtmlがどのように見えるかです:

<body >   

    <ons-tabbar var='Apptabbar'>
      <ons-tabbar-item icon="users" label="People" active="true" page="people.html"></ons-tabbar-item>
      <ons-tabbar-item icon="clock-o" label="Schedule"page="schedule.html"></ons-tabbar-item>
      <ons-tabbar-item icon="map-marker" label="Map" page="map.html"></ons-tabbar-item>
    </ons-tabbar>

<script type="text/ons-template" id="people.html">
<ons-navigator>
  <ons-page ng-controller="PeopleController">
    <ons-toolbar modifier="bgred">
      <div class="center">People</div>
    </ons-toolbar>

    <ons-list>
      <ons-list-item modifier="chevron" ng-repeat="person in persons" ng-click="showDetail($index)">
      {{ person.first_name }} {{ person.last_name }}
      </ons-list-item>
    </ons-list>
  </ons-page>
</ons-navigator>
</script>

<script type="text/ons-template" id="person.html">
  <ons-page ng-controller="PersonController">
    <ons-toolbar modifier="bgred">
      <div class="left">
        <ons-back-button style="color: #FFF;">People</ons-back-button>
      </div>
      <div class="center">{{person.first_name}}</div>
    </ons-toolbar>

    <ons-list>
      <ons-list-item>{{person.first_name}}</ons-list-item>
    </ons-list>
  </ons-page>
</script>

</body>

私のjsファイルは次のようになります

(function(){
    'use strict';
    var app = angular.module('tedxph', ['onsen.directives']);
    //Person Controller
    app.controller('PersonController', function ($scope, $data) {
        $scope.person = $data.selectedItem;
        console.log($scope.person)
    })
    //People Controller
    app.controller('PeopleController', function ($scope, $data) {
        $scope.persons = $data.items;

        $scope.showDetail = function (index) {
            var selectedItem = $data.items[index];
          $data.selectedItem = selectedItem;
          $scope.ons.navigator.pushPage('person.html', {title : selectedItem.first_name});
        }
    })

    app.factory('$data', function() {
        var data = {};

        data.items = [
            {first_name: "Steve", last_name: "Jobs"},
            {first_name: "Larry", last_name: "Page"},
            {first_name: "Bill", last_name: "Gates"},
            {first_name: "Micheal", last_name: "Dell"}
        ];

        return data;
    });
})();

person.html ページは変数値をレンダリングせず、代わりに値ではなく「{{person.first_name}}」を表示します。私は何か間違ったことをしていますか？

4

1 に答える 1

0

JSON キーを二重引用符で囲んでみてください。アンダースコアにいくつかの問題があるかもしれません。

于 2014-08-11T22:24:10.790 に答える