我正在尝试引用放置在引导模态使用的模板内的剑道网格。当直接放置在应用程序控制器的范围内时，同一网格可以工作，但是会从模式实例控制器引发未定义的错误。
有人可以告诉我我在做什么错。
var app = angular.module('plunker', ['ui.bootstrap', 'kendo.directives']);
app.controller('MainCtrl', function($scope, $modal) {
$scope.name = 'World';
$scope.mySource = new kendo.data.DataSource({
data: [
{ColumnOne:'One', ColumnTwo:'Two'},
{ColumnOne:'Three', ColumnTwo:'Four'},
{ColumnOne:'Five', ColumnTwo:'Six'}
]
});
$scope.myGridChange = function(){
var selectedRows = $scope.myGrid.select();
console.log($scope.myGrid.dataItem(selectedRows[0]));
};
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
$modal.open({
templateUrl: 'myGridTemplate.html', //'myTemplate.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.myTempSource = new kendo.data.DataSource({
data: [
{ColumnOne:'One', ColumnTwo:'Two'},
{ColumnOne:'Three', ColumnTwo:'Four'},
{ColumnOne:'Five', ColumnTwo:'Six'}
]
});
$scope.myTempGridChange = function(){
var selectedRows = $scope.myTempGrid.select();
console.log($scope.myTempGrid.dataItem(selectedRows[0]));
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
我无法在以下位置调用未定义的方法“选择”
var selectedRows = $scope.myTempGrid.select();
这是我的plnkr的链接
在模态之外，控制器和网格具有相同的作用域。但是，当它们在模态中时，网格范围嵌套在控制器范围内。不能完全确定为什么会这样，但是这就是为什么会出现问题。
当您具有嵌套作用域时，子作用域将典型地从父作用域继承。对于原型继承，当您直接在子作用域上设置某些内容时，它将不会覆盖父作用域。因此，当Kendo设置$ scope.myTempGrid时，它只会在子作用域上设置，而当您尝试从控制器访问它时，它不在那儿。
这可能会造成很大的混乱，但是幸运的是，如果您始终避免将事物直接绑定到示波器，则不应遇到此类问题。例如，如果将网格放在父作用域的某个容器对象中，则不会遇到此问题。
例如：http : //plnkr.co/edit/0VFJfp?p=preview
控制器：
...
$scope.container = {};
...
的HTML
...
<div kendo-grid="container.myTempGrid">
...
更好的解决方案是始终使用“ controller as”语法：http : //plnkr.co/edit/Pmjend?p=preview
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句