使用 ui.grid 与 cellTemplate 共享 $scope

Question

我正在使用 ui.grid 获取部件列表。我创建了一个列，其中包含一个启动模式的按钮。我遇到的问题是共享行中包含的部分的范围。我想与我使用 cellTemplate 创建的按钮共享该行的属性。然后我想与它将启动的模式共享部分行的 $scope。

我对如何实际执行此操作有点困惑。

到目前为止我已经试过了

• 在我想要定位的按钮周围环绕一个 ng-repeat。这种工作但使应用程序超级慢 • 通过ng-class 在按钮上进行数据绑定。我似乎无法正确定位。

如何将您通过 $http.get 接收到的对象的 $scope 共享到 ui.grid 以及您使用 cellTemplate 创建的元素？

Answer 1

您可以使用外部范围在行选择或单击该行时访问行及其属性

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

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

Answer 2

我使用 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}}。当然你也可以传入任何其他数据。

Answer 3

免责声明 -- 我总是使用 controllerAs 语法，因此如果在 HTML 的上下文中引用控制器对您来说很奇怪，请忽略该部分并假装您将方法设置为直接在范围内。我也用 Typescript 做所有事情，而不是 Javascript，所以我将在这里编写代码的相关部分。它们应该很容易插入您的应用程序。

答案是您已经从 Sunil 和 S.Baggy 那里得到的两个答案的组合。

您要做的是使用 getExternalScopes() 函数并将某些内容附加到网格所在的 HTML 范围。你递给网格的东西将排在行中并调用你的模式弹出窗口。请参阅下面的说明。

你的HTML-

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

通过使用 controllerAs 语法并使控制器成为外部作用域中的引用，我们现在可以访问控制器中的所有内容。所以我们可以调用其中的方法。然而，为了做到这一点，我们必须使用一个 cellTemplate，听起来您已经知道该怎么做，并且在该 cellTemplate 中我们必须具有以下内容：

ng-点击="getExternalScopes().methodToLaunchModal()"

现在连接所有这些的最后一部分是将 methodToLaunchModal() 方法写入控制器。为此，我们从 S.Baggy 的回答中借用了代码。这是一个带有 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 来获取它的值。

如果有任何语法问题，我们深表歉意。

使用 ui.grid 与 cellTemplate 共享 $scope

Sharing $scope with cellTemplate using ui.grid

javascript

angularjs

angular-ui

angular-ui-grid