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

Question

Я использую ui.grid для получения списка деталей. Я создал столбец, содержащий кнопку, которая запускает модальный. У меня возникают проблемы с совместным использованием области, содержащейся в строке. Я хочу поделиться свойствами этой строки с кнопкой, которую я создаю с помощью cellTemplate. Затем я хочу разделить $ scope строки детали с модальным, который будет запущен.

Я немного зациклен на том, как это сделать на самом деле.

До сих пор я пытался

• Обертывание в нг-повтор вокруг кнопки, что я хочу, чтобы предназначаться. Этот вид работ, но делает приложение супер медленным • привязка данных к кнопке через ng-класс. Кажется, я не могу настроить это правильно.

Как вы можете совместно использовать $ scope объекта, который вы получаете через $ http.get, в ui.grid с элементами, которые вы создаете с помощью cellTemplate?

Answer 1

Отказ - Я всегда использую синтаксис controllerAs, поэтому, если ссылки на контроллер в контексте HTML странно для вас, просто игнорировать эту часть и делать вид, как вы настроите методы непосредственно на сферу. Я также делаю все в машинописном тексте, а не в 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, чтобы получить его значение.

Извините, если какой-либо синтаксис слегка выключен.

Answer 2

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

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

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

Answer 3

Я использую директиву самозагрузки $ модальный с кодом, как это ...

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}} в шаблоне. Конечно, вы могли бы передать и другие данные.