Совместное использование $scope с cellTemplate с использованием ui.grid

Отказ от ответственности. Я всегда использую синтаксис controllerAs, поэтому, если ссылка на контроллер в контексте HTML кажется вам странной, просто проигнорируйте эту часть и притворитесь, что вы настраиваете методы непосредственно в области видимости. Я также делаю все на Typescript, а не на Javascript, поэтому я собираюсь написать здесь соответствующие части кода. Их должно быть легко подключить к вашему приложению.

Ответ представляет собой комбинацию двух ответов, которые вы уже получили от Сунила и С. Бэгги.

Что вы хотите сделать, так это использовать функцию getExternalScopes() и прикрепить что-то к области HTML, где находится ваша сетка. То, что вы передали сетке, займет строку и вызовет ваше модальное всплывающее окно. См. ниже небольшое пояснение.

Ваш HTML -

<div ng-controller="MyController as myController">
  <div ui-grid="myController.GridObject" external-scopes="myController"></div>
</div>

Используя синтаксис controllerAs и сделав контроллер ссылкой во внешних областях, мы теперь можем получить доступ ко всему в нашем контроллере. Таким образом, мы можем вызывать в нем методы. Однако для этого мы должны использовать cellTemplate, что, похоже, вы уже знаете, как это сделать, и в этом cellTemplate у нас должно быть следующее:

ng-click="getExternalScopes().methodToLaunchModal()"

Теперь последняя часть подключения всего этого — запись метода methodToLaunchModal() в контроллер. Для этого мы заимствуем код из ответа С. Бэгги. Вот очень сокращенный контроллер с GridObject (тот самый, на который я ссылался из контроллера выше):

app.controller('MainCtrl', function($scope, $modal) {    
GridObject = {
   ... setup of all the other things
   columnDefs: [{ etc, etc, }, { etc, cellTemplate: '<div ng-click="getExternalScopes().methodToLaunchModal(row.entity)">whatever</div>' }]
};

methodToLaunchModal: function(row) {
   var modalInstance = $modal.open({
                        templateUrl: 'someTemplate',
                        controller: 'ModalController',                       
                        resolve: {
                            rowObject: function () { return row; }
                        }
                    });
   };
});

На этом этапе ваша модальная область будет иметь объект с именем rowObject, который будет иметь все свойства из вашей строки. Таким образом, вы должны иметь возможность вызывать rowObject.SomeProperty, чтобы получить его значение.

Извиняюсь, если какой-либо синтаксис немного не так.

Я использую директиву bootstrap $modal с таким кодом...

clickFunction: function (event, row) {
                    event.stopPropagation(); // prevents the current row from appearing as selected
                    var modalInstance = $modal.open({
                        templateUrl: 'views/modalcontent.tpl.html',
                        controller: 'ModalMessageController',
                        size: 'lg',
                        resolve: {
                            message: function () { return row.entity.serial_number; }
                        }
                    }
                );

Затем я просто ссылаюсь на {{message}} в шаблоне. Конечно, вы можете передать и любую другую часть данных.

Вы можете получить доступ к строке и ее свойствам при выборе строки или ng-щелчок по этой строке с помощью externalscopes

ng-click="getExternalScopes().onRowClick(row)"

 onRowClick: function (row) {
                row.entity.Property1; /// and so on for all row properties
             }