Javascript 使用ui.grid与cellTemplate共享$scope

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

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

到目前为止我已经试过了

•在我要瞄准的按钮周围环绕ng重复。这种方式可以工作，但会让应用程序运行得非常慢 •通过ng类在按钮上绑定数据。我似乎无法正确地瞄准这一点

---

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

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

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

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

---

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

。当然，您也可以传入任何其他数据块。

免责声明--我总是使用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 click=“getExternalScopes（）.MethodToLaunchModel（）”

现在连接所有这些的最后一部分是将methodToLaunchModel（）方法写入控制器。为此，我们借用了S.Baggy的答案。下面是一个带有GridObject的非常简短的控制器（与我从上面的控制器中引用的相同）：

app.controller（'MainCtrl'，函数（$scope，$modal）{
GridObject={
…所有其他事情的设置
columnDefs:[{etc，etc，}，{etc，cellTemplate:'whatever'}]
};
MethodToLaunchModel:函数（行）{
var modalInstance=$modal.open({
templateUrl:“someTemplate”，
控制器：“ModalController”，
决心：{
rowObject:函数（）{return row；}
}
});
};
});

此时，模态作用域上将有一个名为rowObject的对象，该对象将具有您所在行的所有属性。因此，您应该能够调用rowObject.SomeProperty来获取其值

---

如果任何语法有点错误，请道歉。

对不起，Sunil，这似乎对我不起作用。我可以使用id=“{row.entity.serial_number}}”将我需要的对象的属性作为目标。我现在正试图与我要启动的模式共享行范围。您可以共享plunkr吗？然后我想与它将启动的模式共享part行的$scope。是否只共享实际行的数据，或者实际的整个范围对象？实际行的数据您可以包括启动模式的代码吗？您可以用最少的代码设置plunker。。大约一年前我也做过类似的事情。。但是我不记得了，如果你能帮我装一个弹夹，我可以帮你

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; }
                        }
                    });
   };
});