Question

以下是我的插图示例： http://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae?p=preview

我想做的事情： 使用cellTemplate将我的数据中field04的复选框html绑定到单元格，并仍然可以访问其ng-click函数。

app.js中的代码：

var app = angular.module('app', ['ui.grid', 'ngSanitize']);

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

$scope.myViewModel = {
  someProp:'abc',
  showMe : function(){
     alert(this.someProp);
  }
};

$scope.gridOptions = {
};

$scope.gridOptions.columnDefs = [
     { name: 'field01', field: 'field01' },
     { name: 'field02', field: 'field02'},
     { name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">'},
     { name: 'field04', field: 'field04', cellTemplate: 'viewTemplate2'},
     { name: 'field05', field: 'field05', cellTemplate: 'viewTemplate2'} 
   ];

$scope.gridOptions.data = [
  {
      "field01": "one",
      "field02": "01",
      "field03": false,
      "field04": '',
      "field05": '',
  },
  {
      "field01": "two",
      "field02": "02",
      "field03": false,
      "field04": '',
      "field05": '',
  },
  {
      "field01": "three",
      "field02": "03",
      "field03": false,
      "field04": '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">',
      "field05": '<div><a href="#" title="icon link"><img class="icon" alt=""/></a></div>',
  }
];
$scope.toggle = function() {
  alert("toggled");
}
}]);

index.html的代码：

<body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.min.js"></script>
<script src="app.js"></script>
<script type="text/ng-template" id="viewTemplate2">
  <span ng-bind-html="row.entity[col.field]"></span>
</script>

</body>

如果我在columnDef中编写html，我在field03中实现了正确的效果。感谢TomMorgan的傻瓜：http://plnkr.co/edit/9eRg9Yjl2ooeSuWMJ8x2?p=preview。

我可以使用field05中的数据填充cellTemplate。

为什么它不适用于field04中的复选框？

我是angularjs的新手，很难分开＆＃34; ui-grid＆＃34;来自＆＃34; ng-grid＆＃34;的解决方案解决方案。我很感激帮助。

Answer 1

我不确定我是否理解您的代码。

您不应将html代码放入数据中。所以我把它改成了：

   $scope.gridOptions.data = [
      {
          "field01": "one",
          "field02": "01",
          "field03": false,
          "field04": '',
          "field05": '',
      },
      {
          "field01": "two",
          "field02": "02",
          "field03": false,
          "field04": '',
          "field05": '',
      },
      {
          "field01": "three",
          "field02": "03",
          "field03": false,
          "field04": '',
          "field05": '',
      }
    ];

下一步：在您的单元格模板中传递对更改值的引用：

 { name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox"
  ng-model="row.entity.field03" ng-click="$event.stopPropagation();
  getExternalScopes().showMe(row.entity.field03)">'}

请注意，函数showMe()现在有一个参数：

showMe(row.entity.field03)

在外部范围内，您应该对参数做出反应：

$scope.myViewModel = {
  someProp:'abc',
  showMe : function(value){
     alert('toggled to: '+value);
  }
};

（你真的不需要someProp）

$scope.toggle()功能可以删除，也可以从showMe()调用。

此外，我在你的html中添加了一些调试帮助，告诉你绑定工作得很好：

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>
  <hr>
  {{gridOptions.data | json}}
</div>

这是Plunker。这就是你想要的吗？

<强>更新

这是另一个Plunker，其中包含第4列中的复选框。

Answer 2

以下是带有appScope的Plunker，外部作用域不再适用。

我已经对新的appScope进行了一些更改：

 { name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox"
  ng-model="row.entity.field03" ng-click="grid.appScope.showMe(row.entity.field03)">'}

在范围内你应该对参数作出反应，但是我从myViewModel中拉出来并在$ scope中创建了一个函数：

$scope.showMe : function(value){
     alert('toggled to: '+value);
};

您可以针对我的版本16测试版本15的代码。我的新版本运行正常，但是没有。

Answer 3

您需要使用$ sce告诉ng-bind-html您绑定的HTML内容是安全的。

我已经分叉了你的问题，问题的解决方案是http://plnkr.co/edit/JyTaF8niJlf9Wpb775kb?p=preview

    app.filter('unsafe', function ($sce) {
       return $sce.trustAsHtml;
    });

您必须将此过滤器与ng-bind-html

一起使用

为什么我不能在cellTemplate中绑定输入类型“复选框”？

3 个答案: