Question

我正在尝试创建主 - 详细信息应用，但我无法访问模板中的控制器$ 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页面不会呈现变量值，而是显示＆＃34; {{person.first_name}}＆＃34;而不是价值。我做错了吗？

Answer 1

尝试用双引号包装JSON密钥。下划线可能会有一些小问题。

无法访问模板中的controller $ scope变量

1 个答案: