Невозможно получить ссылку на сетку кендо в угловом модальном окне начальной загрузки

4

Я пытаюсь получить ссылку на сетку кендо, помещенную в шаблон, используемый bootstrap modal. Такая же сетка работает, когда она помещается непосредственно в область действия контроллера приложения, но выдает ошибку undefined из модального контроллера экземпляра.

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно.

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

Я получаю Не могу вызвать метод 'select' из undefined в

var selectedRows = $scope.myTempGrid.select();

Вот ссылка на мой plnkr

http://plnkr.co/edit/GUSX6JR9HRvtdSWclvPl?p=preview

Теги:
kendo-ui
kendo-grid

1 ответ

7
Лучший ответ

Вне вашего модального управления контроллер и сетка имеют одинаковую область действия. Однако, когда они находятся внутри вашего модального объекта, область сетки вложена внутри области контроллеров. Не совсем понятно, почему это так, но вот почему это проблема.

Когда у вас есть вложенные области действия, дочерняя область будет прототипически наследоваться от родительской области. С прототипическим наследованием, когда вы устанавливаете что-то непосредственно на дочернюю область, он не будет переопределять родительскую область. Поэтому, когда 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

  • 0
    Спасибо, я постараюсь использовать контроллер в качестве синтаксиса.
  • 0
    спасибо, твой ответ сработал для меня

Ещё вопросы

Сообщество Overcoder
Наверх
Меню