在部分页面中使用 ng-grid答案

【问题标题】：Using ng-grid in partial page在部分页面中使用 ng-grid
【发布时间】：2013-05-04 19:12:01
【问题描述】：

有没有在部分页面中使用 ng-grid 的示例。每当我尝试使用时，都会弹出一个错误为TypeError: Cannot set property 'myData' of undefined。

我的 App.js

'use strict';


// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'ngGrid']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

Controller.js

'use strict';

/* Controllers */

angular.module('myApp.controllers', ['ngGrid']).
  controller('MyCtrl1', [function ($scope) {

      $scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 { name: "Enos", age: 34 },];
      $scope.gridOptions = {
          data: 'myData',
          columnDefs: [{ field: 'name', displayName: 'Name' },
              { field: 'age', displayName: 'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>' }],
          showGroupPanel: true
      };
  }])
  .controller('MyCtrl2', [function() {

  }]);
//MyCtrl1.$inject = ['$scope'];

部分1.html

<p>This is the partial for view 1.</p>
<div class="gridStyle" ng-grid="gridOptions"></div>
      <div style="clear:both"/>
<p>{{ myData | json }}</p>

Partial2.html

<p>This is the partial for view 2.</p>
<p>
  Showing of 'interpolate' filter:
  {{ 'Current version is v%VERSION%.' | interpolate }}
</p>

还有 index.html

<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/ng-grid.css">
  <link rel="stylesheet" href="css/Style.css">

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  --> 
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="lib/angular/angular.js"></script>
  <script src="js/ng-grid-2.0.5.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>
</body>
</html>

你能说一下，为什么 'myData' 在 Partial1.html 中不可用？

提前致谢。

【问题讨论】：

标签： html angularjs partial-views ng-grid

【解决方案1】：

可能为时已晚，但这里的代码 {名称：“以诺斯”，年龄：34 }，]；你不需要昏迷。它应该是： {姓名：“以诺斯”，年龄：34 }];

【讨论】：