我正在尝试在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
答案 0 :(得分：2)
警告：不是这个问题的直接答案
我需要一个树形结构数据的网格，最后使用abn树提供的代码来创建树形网格指令。
演示： tree-grid
<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";
答案 1 :(得分：0)
我有同样的错误，但我没有使用网格，但许多其他依赖项。我将AngularJS从1.0.8升级到1.2.0-rc.2并解决了这个问题...这里希望RC2不会在其他方面引起更多的悲痛！这对您的问题有帮助吗？
答案 2 :(得分：0)
关于“track”的错误是因为abn-tree使用了1.1al中添加到AngularJS的“track by”功能。
abn-tree适用于Angular 1.1.5或Angular 1.2.0，以及Bootstrap 2或Bootstrap 3。