在具有多个链接的ng网格中创建自定义单元格内容-使ng单击工作

Creating custom cell content in ng-grid with multiple links - making ng-click work?

本文关键字：ng 单元格 自定义 工作 单击 创建 链接 网格      更新时间：2023-09-26

我对使用ng网格有一个有趣的要求，其中一个单元格中可以有多个用逗号分隔的链接。虽然我可以在单元格中呈现内容，但ng-click操作不起作用。我正在使用一个指令来创建链接。这就是我认为问题所在，但我对指令如何解决这个问题还不够了解。

下面是我的代码：http://plnkr.co/edit/xFLzHPpmwcrEdM3eyRN5?p=preview

带有指令的控制器代码：

var app = angular.module('myApp', ['ngGrid']);
app.controller('MainCtrl', function($scope) {
  $scope.data = [{
    "0": "Hemogloben",
    "1": "1|2,2|3",
    "2": "3|4",
    "3": "4|5"
  }, {
    "0": "WBC",
    "1": "",
    "2": "5|6",
    "3": "6|7"
  }, {
    "0": "Neutrophils",
    "1": "",
    "2": "",
    "3": "6|8"
  }];
  $scope.headers = [{
    "field": "0",
    "displayName": "Lab",
    "pinnable": true,
    "pinned": true,
    "width": 160
  }, {
    "field": "1",
    "displayName": "8/1/2014 (week 1)",
    "pinnable": false,
    "width": 160,
    "cellTemplate": "<div class='"ngCellText'" ng-class='"col.colIndex()'"><span ng-cell-text><div lab-val labdata='"row.getProperty(col.field)'"></div></span></div>"
  }, {
    "field": "2",
    "displayName": "8/8/2014 (week 2)",
    "pinnable": false,
    "width": 160,
    "cellTemplate": "<div class='"ngCellText'" ng-class='"col.colIndex()'"><span ng-cell-text><div lab-val labdata='"row.getProperty(col.field)'"></div></span></div>"
  }, {
    "field": "3",
    "displayName": "8/15/2014 (week 3)",
    "pinnable": false,
    "width": 160,
    "cellTemplate": "<div class='"ngCellText'" ng-class='"col.colIndex()'"><span ng-cell-text><div lab-val labdata='"row.getProperty(col.field)'"></div></span></div>"
  }];
  $scope.baselineLabsGridOptions = {
    data: 'data',
    enablePinning: true,
    enablePaging: false,
    showFooter: false,
    columnDefs: 'headers',
    showSelectionCheckbox: false
  };
  $scope.edit = function(id, val) {
    $("#result").text(val);
  };
});
app.directive('labVal', function($compile) {
  return {
    restrict: 'A',
    scope: {
      labdata: '='
    },
    link: function(scope, elem) {
      scope.$watch('labdata', function(newval) {
        var arrVals = scope.labdata.split(',');
        var retArr = [];
        for (var i = 0; i < arrVals.length; i++) {
          var valArr = arrVals[i].split('|');
          if (valArr.length > 1)
            retArr.push('<a ng-click="edit(' + valArr[0] + ',''' + valArr[1] + ''')">' + valArr[1] + '</a>');
          else
            retArr.push('<span>&nbsp;</span>');
        }
        var el = angular.element(retArr.join(", "));
        var compiled = $compile(el);
        elem.append(el);
        compiled(scope);
      });
    }
  };
});

Html：

  <head>
    <link data-require="ng-grid@*" data-semver="2.0.9" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.9/ng-grid.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <script data-require="ng-grid@*" data-semver="2.0.9" src="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.9/ng-grid.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <div class="modalGridStyle" data-ng-grid="baselineLabsGridOptions"></div>
    <div id="result">Nothing yet!</div>
  </body>
</html>

非常感谢您的帮助。

ng-click不知道edit()是什么。该函数只存在于控制器作用域上，由于您正在隔离指令作用域，它不知道如何访问它。

在声明指令时，您可以向范围中添加一个额外的变量：

scope: {
  labdata: '=',
  edit: '='
}

然后在你的网格模板上，只需传递控制器编辑功能：

<div class='ngCellText' ng-class='col.colIndex()'>
   <span ng-cell-text>
     <div lab-val labdata='row.getProperty(col.field)' edit='edit'></div>
   </span>
 </div>"
相关文章：