使用ui.grid与cellTemplate共享$scope

Sharing $scope with cellTemplate using ui.grid

本文关键字：共享 scope cellTemplate ui grid 使用      更新时间：2024-07-02

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

我有点困惑于如何真正做到这一点。

到目前为止，我已经尝试过

•在我想要瞄准的按钮周围缠绕一个ng重复。这种方法很有效，但会使应用程序速度变慢•通过ng类在按钮上绑定数据。我似乎不能正确地针对这一点。

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

免责声明——我总是使用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来获取其值。

如果任何语法稍有错误，我们深表歉意。

我使用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-click="getExternalScopes().onRowClick(row)"
 onRowClick: function (row) {
                row.entity.Property1; /// and so on for all row properties
             }
相关文章：