javascript - 使用 ui.grid 与 cellTemplate 共享 $scope

Question

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

我对如何实际做到这一点有点困惑。

到目前为止我已经尝试过

• 在我想要定位的按钮周围包裹一个 ng-repeat。这种方法可行，但会使应用程序 super 慢 • 通过ng-class 在按钮上进行数据绑定(bind)。我似乎无法正确定位这个目标。

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

Answer 1

免责声明——我总是使用controllerAs语法，所以如果在HTML上下文中引用 Controller 对你来说很奇怪，只需忽略该部分并假装你将方法直接设置在范围。我也在 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语法并使 Controller 成为外部作用域中的引用，我们现在可以访问 Controller 中的所有内容。所以我们可以调用其中的方法。但是，为了做到这一点，我们必须使用 cellTemplate，这听起来你已经知道如何做，并且在该 cellTemplate 中我们必须具有以下内容:

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

现在，连接所有这些的最后一部分是将 methodToLaunchModal() 方法写入 Controller 。为此，我们借用了 S.Baggy 答案中的代码。这是一个带有 GridObject 的非常简短的 Controller (与我在上面的 Controller 中引用的 Controller 相同):

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 来获取其值。

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