Question

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

我对如何实际做到这一点感到有点难过。

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

•围绕我想要定位的按钮包裹ng-repeat。这种工作但使应用程序超级慢 •通过ng-class对按钮进行数据绑定。我似乎无法正确地确定目标。

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

Answer 1

我使用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 2

免责声明 - 我总是使用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中我们必须有以下内容：

纳克单击= “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来获取它的值。

如果任何语法略有偏离，请道歉。

Answer 3

您可以使用externalscopes访问行选择或ng-click该行的行及其属性

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

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

使用ui.grid与cellTemplate共享$ scope

3 个答案: