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

Question

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

我对如何实际执行此操作有点难过。

到目前为止我已经尝试过

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

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

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 中引用的相同):

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

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