AngularJS:如何从 ui-grid 单元格模板访问范围? [英] AngularJS : How to access scope from ui-grid cell template?

问题描述

如何从 ui-grid 单元格模板访问 $scope?这是我的控制器代码:

app.controller('MainCtrl', ['$scope', function ($scope) {//我想从单元格模板中引用它.$scope.world = function() { return 'world';};$scope.gridOptions = {数据: [{ id: "item1" },{ id: "item2" }],列定义:[{字段:'id'，//world() 永远不会被调用，也不会显示.cellTemplate: '<div>{{ "hello" + world() }}</div>'}]};}]);

在这里查看它的实际效果:http://plnkr.co/edit/WYXeQShHWKDYDs4MIZnP?p=preview

我希望单元格内容显示hello world"，但它们只显示hello".

解决方案

根据 http://ui-grid.info/docs/#/tutorial/305_appScope，网格有自己的独立作用域，所以你需要使用grid.appScope来访问你的应用程序作用域.解决办法是将单元格模板改为:

 cellTemplate: '
{{ "hello " + grid.appScope.world() }}</div>'

How does one access $scope from a ui-grid cell template? Here's my controller code:

app.controller('MainCtrl', ['$scope', function ($scope) {

  // i want to reference this from a cell template.
  $scope.world = function() { return 'world'; };

  $scope.gridOptions = {
    data: [
      { id: "item1" },
      { id: "item2" }
    ],
    columnDefs: [
    {
      field: 'id',

      // world() is never called and is not displayed.
      cellTemplate: '<div>{{ "hello " + world() }}</div>'
    }]
  };
}]);

See it in action here: http://plnkr.co/edit/WYXeQShHWKDYDs4MIZnP?p=preview

I would expect cell contents to show "hello world", but they just show "hello".

解决方案

According to http://ui-grid.info/docs/#/tutorial/305_appScope, the grid has its own isaloted scope, so you need to use grid.appScope to access your application scope. The solution is to change the cell template to:

  cellTemplate: '<div>{{ "hello " + grid.appScope.world() }}</div>'

这篇关于AngularJS:如何从 ui-grid 单元格模板访问范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！