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> 

선언

난 다음 행에서 한 번 더 그럴 데이터를 생성 할 필요가

. 한

정의 지시어는

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

정확하게 이해하면 클릭 기능이 지시문에 있습니다.

그래서, 난이 반복되고있는 $ 데이터 배열의 서비스를 추가하고 클릭의 서비스를 사용하여 해당 배열에 다른 항목을 추가합니다. 같은

그렇게

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>