在NGClick上动态生成指令内容

Question

我有一个表。因为我已经宣布了我的自定义指令

<table ng-show="dataset.length" ng-table="tableParams" class="table">
    <thead>
        <tr>
            <th></th>   
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="server in $data" ng-class-odd="'odd-row'" ng-class-even="'even-row'">
            <td width="30" class="text-center">
                <i class="ion-plus-round **toggle-icon**" group-row></i>
            </td>
        </tr>
    </tbody>
</table> 

单击 toggle-icon class

我需要在下一行中生成更多TR数据。

自定义指令是

app.directive('groupRow', function(){
    return {
      restrict: 'EA',
         transclude: true,
        controller: 'groupRowDirCtrl',
        templateUrl: 'views/directives/templates/group-row.html',
        link: function( scope, element, attrs, groupRowDirCtrl ) {
            element.bind('click', function() {
                $compile(el)(scope);
                element.parent().parent().after(el);
            });
        }
    };
})
.controller('scrollableTableviewDirCtrl',
    function($scope) {
});

数据必须从HTML页面获取并附加到下一行中。

如何做？

Answer 1

如果我正确理解您，请点击功能在指令中。

因此，我将为 $ DATA 数组添加一个服务，然后单击使用服务，然后单击该数组中的另一个项目。

喜欢

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, dataService) {
  dataService.setData([1, 2, 3]);
  $scope.data = dataService.getData();
});
app.directive('dir', function(dataService) {
  return {
    restrict: 'E',
    replace: true,
    template: '<tr><td ng-click="addMore()">One More</td></tr>',
    link: function($scope, elem, attrs) {
      $scope.addMore = function() {
        dataService.addRow();
      }
    }
  }
});
app.service('dataService', function() {
  var _data = [];
  var _service = {};
  var _cb;
  _service.getData = function() {
    return _data;
  }
  _service.setData = function(data) {
    _data = data;
  }
  _service.onUpdate = function(cb) {
    _cb = cb;
  }
  _service.addRow = function( /* attibutes here */ ) {
    _data.push({});
    if (angular.isFunction(_cb)) _cb();
  }
  return _service;
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <table>
      <tbody>
        <dir ng-repeat="d in data"></dir>
      </tbody>
    </table>
  </div>
</div>