1

我正在尝试在 Angular js 中实现 ng-grid 和树功能。但我不清楚如何在其中添加依赖项。如果我只使用树，它工作正常，但是当我向它添加网格时，树不会出现在页面上。这是我的控制器代码：

var app;


app = angular.module('AbnTest', ['angularBootstrapNavTree']);

/*app=angular.module('AbnTest',['ngGrid']);*/

app.controller('AbnTestController', function($scope) {
  var apple_selected;
  $scope.my_default_handler = function(branch) {
    var _ref;
    $scope.output = "You selected: " + branch.label;
    if ((_ref = branch.data) != null ? _ref.description : void 0) {
      return $scope.output += '(' + branch.data.description + ')';
    }
  };
  apple_selected = function(branch) {
    return $scope.output = "APPLE! : " + branch.label;
  };

  $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' };


 $scope.example_treedata = [ {
  label: 'Mineral',
  children: [
    {
      label: 'Rock',
      children: ['Igneous', 'Sedimentary', 'Metamorphic']
    }, {
      label: 'Metal',
      children: ['Aluminum', 'Steel', 'Copper']
    }, {
      label: 'Plastic',
      children: [
        {
          label: 'Thermoplastic',
          children: ['polyethylene', 'polypropylene', 'polystyrene', ' polyvinyl chloride']
        }, {
          label: 'Thermosetting Polymer',
          children: ['polyester', 'polyurethane', 'vulcanized rubber', 'bakelite', 'urea-formaldehyde']
        }
      ]
    }
  ]
 }
 ];
    return $scope.change = function() {
    debugger;
   return $scope.example_treedata = [
     {
     label: 'Animal',
     children: ['Cat', 'Dog']
    }
  ];
};
});

在这里，我已经注释掉了 ng-grid 的依赖关系，因为它会产生树功能的问题。有没有人遇到过类似的问题？

这是我的 html 文件：

<!DOCTYPE html>
<html ng-app="AbnTest">
<head>
<script type="text/javascript" src="../test/jquery.min.js"></script>
<!-- Bootstrap 2-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-     bootstrap/2.3.2/css/bootstrap-combined.min.css">
<!--script(src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js")-->
<!-- Angular JS-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<!-- Font Awesome (optional)-->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<!--/-->
<!-- abn-tree ( the thing we are testing )-->
<!---->
<script src="../dist/abn_tree_directive.js"></script>
<link rel="stylesheet" href="../dist/abn_tree_style.css">
<!-- js for this test page:-->
<script src="../test/test_abn_tree.js"></script>
<script type="text/javascript" src="../test/ng-grid.js"></script>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript" src="ng-grid.debug.js"></script>
    <script type="text/javascript" src="ng-grid-csv-export.js"></script>
    <script type="text/javascript" src="ng-grid-flexible-height.js"></script>
<!-- Live Reload ( for development )-->
   <!-- <script src="http://localhost:35729/livereload.js"></script> -->
    <script>
     /*var app = angular.module('AbnTest', ['ngGrid']);
           app.controller('MyCtrl', function($scope) {
              csvOpts = { columnOverrides: { obj: function(o) { return o.a + '|' +  o.b;   } } }
            hgtOpts = { minHeight: 200 }  ;
            $scope.myDataSmall = [ {hasThing: false,  obj: {a:5, b:6}, name: "Moroni", age: 50, ln: 'sdf'}
                                 , {hasThing:  true,  obj: {a:6, b:7}, ln: "Tiasdfsdfnd", age: 43}
                                 ]


            $scope.gridOptionsSmall = {
                data: 'myDataSmall',
                plugins: [new ngGridCsvExportPlugin(csvOpts),new ngGridFlexibleHeightPlugin()],
                showGroupPanel: true,
                showFooter: true
            };
        });*/
   /*angular.element(document).ready(function() {
   alert(document.getElementById('test'));
       angular.bootstrap(document.getElementById('test'), ['ngGrid']);
    app.controller('AbnTestController', 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' };

 });
    });*/
</script> 
<link rel="stylesheet" type="text/css" href="../dist/ng-grid.css" /> 
</head>
 <body >
 <div ng-controller="AbnTestController">
  <button ng-click="change()">Change</button>
  <div class="row">
    <div class="span2"></div>
    <div class="span10">
      <h2>Tree With Grid</h2>

  </div>
</div>
<div class="row"><br></div>
<div class="row">
  <div class="span2"></div>
  <div class="span4 well">
    <abn-tree header="This is the example tree" tree-data="example_treedata" icon-leaf="icon-file" on-select="my_default_handler(branch)" expand-level="2" initial-selection="Vegetable"></abn-tree>
  </div>
  <div class="span8 well">

    <div>
    <table Border=1 rule="rows"><tr>
    <td><b>Sl. No</b></td>
    <td><b>Customer Name</b></td>
    <td><b>Account No.</b></td>
    <td><b>Security No.</b></td>
    </tr>
    <tr>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    </tr>
    <tr>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    <td>{{ output }}</td>
    </tr>
    </table>

  </div>
  </div>
  </div>
  </div> 
  <div ng-controller="MyCtrl" >
 <!-- <div id="test" ng-app="AbnTest" ng-controller="AbnTestController"> <div   class="gridStyle" ng-grid="gridOptions"> -->
  <div class="gridStyle" ng-grid="gridOptionsSmall"></div>


 </div>

   </body>
 </html>

这是浏览器控制台上的错误：

Uncaught Error: Unknown provider: $animatorProvider <- $animator angular.js:2765
Error: Argument 'MyCtrl' is not a function, got undefined
at qa (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16:79)
at ra (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:16:187)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:50:411
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42:146
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:6:312)
at j (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:42:8)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:207)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:38:224)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:37:339 angular.min.js:60


Error: Syntax Error: Token 'track' is an unexpected token at column 35 of the     expression [tree_rows | filter:{visible:true} track by row.branch.uid] starting at [track   by row.branch.uid].
at Error (<anonymous>)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:65:272)
at Mc (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:71:380)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:75:102
at Object.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:216)
at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:142:490)
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:84:286)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:379)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:92:330)
at o (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:95:407) angular.min.js:60
Error: Syntax Error: Token 'track' is an unexpected token at column 35 of the expression [tree_rows | filter:{visible:true} track by row.branch.uid] starting at [track by row.branch.uid].
at Error (<anonymous>)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:65:272)
at Mc (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:71:380)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:75:102
at Object.e.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:216)
at Object.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:142:490)
at Object.e.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:84:286)
at Object.e.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:86:379)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:92:330)
at o (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js:95:407) angular.min.js:60
4

3 回答 3

2

警告：不是这个问题的直接答案

我需要一个用于树结构数据的网格，最终使用 abn tree 提供的代码来创建树网格指令。

演示：树形网格

  <tree-grid tree-data="my_tree_data"></tree-grid>

提供树状结构数据、列定义和要在控制器中扩展的属性。

 $scope.tree_data = [
 {Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
  children:[
    {Name:"California", Area:423970,Population:38340000,TimeZone:"Pacific Time",
        children:[
            {Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
            {Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
        ]
    },
    {Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
        children:[
           {Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
        ]
      }
    ]
  },    
  {Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
];

您可以选择提供 colDefinition，即您要扩展的属性。如果未提供扩展属性，则默认为第一个字符串类型属性或第一个。

$scope.col_defs = [
   { field: "Description"},
   { field: "DemographicId", displayName: "Demographic Id"},
   { field: "ParentId", displayName: "Parent Id"},
   { field: "Area"},
   { field: "Population"},
   { field: "TimeZone", displayName: "Time Zone"}
];

$scope.expanding_property = "Name";

查看详情：https ://github.com/khan4019/tree-grid-directive

于 2014-06-14T13:05:57.817 回答
0

关于“track”的错误是因为abn-tree使用了 AngularJS 1.1.5 中添加的“track by”功能。

abn-tree 适用于 Angular 1.1.5 或 Angular 1.2.0，以及 Bootstrap 2 或 Bootstrap 3。

于 2013-11-03T17:07:35.487 回答
0

我有同样的错误，但我没有使用网格，而是使用了许多其他依赖项。我将 AngularJS 从 1.0.8 升级到 1.2.0-rc.2 并解决了这个问题……希望 RC2 不会在其他领域造成更多悲痛！这对您的问题有帮助吗？

于 2013-09-24T00:28:22.747 回答