Angularjs Angular指令，用于根据按钮单击添加或删除具有唯一id的输入元素

我是一个新的角度，并试图做到这一点角度的方式。我有一个列表，其中包含使用ng repeat创建的几个元素。在每一个按钮中，我都有一个递增计数器的按钮和一个递减计数器的按钮。我想添加或删除一个副本，该副本的唯一id对应于是否单击了递增或递减按钮

下面是我正在使用的页面模板部分的标记

<ul class="list">
  <li class="item" ng-repeat="resource in resources">
    <div class="resource-desc">{{resource.description}}</div>
      <img ng-src="{{resource.thumb}}">
      <div class="incrementer" ng-controller="CounterCtrl">
      <button id='{{$index}}' class="count-btn ion-arrow-up-b"  ng-click="increment()" ng-init="count=0">
        <span class="ion-plus-round"></span>
      </button>
      <div id='{{$index}}'class="count-btn count">{{count}}</div>
      <button id='{{$index}}' class="ion-arrow-down-b"  ng-click="decrement()">
        <span class="ion-minus-round"></span>
      </button>
    </div>
    <div id='{{$index}}' class="multi-name-input">
      <div class="input_wrapper">
        <input type="text" name="{{$index}}resource" required>
        <label for="{{$index}}resource">Enter a Name to Display(ie Bay 1)</label>
      </div>
    </div>
  </li>
</ul>

---

但我真的不确定这是否正确，或者我可能需要或想要在指令中使用什么选项。

我能够想出如何编写附加和删除输入元素的指令，并将它们附加到计数器上相应的递增和递减按钮上

这是按钮的标记

    <section ng-app="myApp" ng-controller="MainCtrl">
    <addinputsbutton></addinputsbutton>
    <removeinputsbutton></removeinputsbutton>
    <div id="space-for-inputs"></div>
    </section>

这是指令

var myApp = angular.module('myApp', []);

function MainCtrl($scope) {
    $scope.count = 0;


}

//Directive that returns an element which adds inputs on click
myApp.directive("addinputsbutton", function(){
    return {
        restrict: "E",
        template: "<button id='{{$index}}' class=\"count-btn ion-arrow-up-b\" ng-click=\"increment()\" ng-init=\"count=0\" addinputs><span class=\"ion-plus-round\">+</span></button>"
    }
});

//Directive for adding inputs on click
myApp.directive("addinputs", function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){

            angular.element(document.getElementById('space-for-inputs')).append($compile("<div class='resource-input'><input id='{{$index}}' type=\"text\" name=\"resource{{$index}}\" required><label for=\"resource{{$index}}\">Enter a Name to Display</label></div>")(scope));
        });
    };
});

//_______________________________________________________________________  

 //Directive that returns an element which removes inputs on click
myApp.directive("removeinputsbutton", function(){
    return {
        restrict: "E",
        template: "<button id='{{$index}}' class=\"count-btn ion-arrow-down-b\" ng-click=\"decrement()\" ng-init=\"count=0\" removeinputs><span class=\"ion-minus-round\">-</span></button>"
    }
});

//Directive for removing inputs on click
myApp.directive('removeinputs', function(){
  return function(scope, element){
    element.bind('click', function(){

      document.getElementById('space-for-inputs').removeChild(document.getElementById('space-for-inputs').lastChild);

    });
  };
});     

---

出于某种原因，我无法让'addinput'和'removeinput'指令在JSFIDLE中工作，除非我将它们添加到根据元素指令创建的自定义按钮中。但是“addinput”和“removeinput”元素在我的应用程序中的普通按钮标记中运行良好。这是万一有人感兴趣的话

在angular中，您通常会将项添加到数据数组或从数组中删除。在您的例子中，将使用ng click，并且conroller函数将执行添加/删除操作，但我认为DOM操作不应该发生，除非通过指令，而不是通过控制器？对，但我的观点是让数据模型执行DOM操作。你能用plunker中的一些数据创建一个简单的演示吗？我已经修改了我找到的两个JSFIDLE。每个人都完成了我想要实现的一部分。第一个[使用ng include]编译我的模板。但它是通过使用ng选项的下拉菜单启动的。第二个[使用ng click从数组中追加字符串，但不使用ng include，因此无法编译我的模板。我尝试过将两者结合起来，但没有成功。使用ng click可以完成删除，无需使用jQuery或指令

.directive('bw-input-append',function($compile){
    return {
        templateUrl: '../../templates/partials/text_input.html',
        transclude: true
        link: function(scope, element){
                  element.click(function(){
                    element.parent().find('.multi-name-input').append($compile(template)(scope));
                        });
                    }
    };
});

    <section ng-app="myApp" ng-controller="MainCtrl">
    <addinputsbutton></addinputsbutton>
    <removeinputsbutton></removeinputsbutton>
    <div id="space-for-inputs"></div>
    </section>

var myApp = angular.module('myApp', []);

function MainCtrl($scope) {
    $scope.count = 0;


}

//Directive that returns an element which adds inputs on click
myApp.directive("addinputsbutton", function(){
    return {
        restrict: "E",
        template: "<button id='{{$index}}' class=\"count-btn ion-arrow-up-b\" ng-click=\"increment()\" ng-init=\"count=0\" addinputs><span class=\"ion-plus-round\">+</span></button>"
    }
});

//Directive for adding inputs on click
myApp.directive("addinputs", function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){

            angular.element(document.getElementById('space-for-inputs')).append($compile("<div class='resource-input'><input id='{{$index}}' type=\"text\" name=\"resource{{$index}}\" required><label for=\"resource{{$index}}\">Enter a Name to Display</label></div>")(scope));
        });
    };
});

//_______________________________________________________________________  

 //Directive that returns an element which removes inputs on click
myApp.directive("removeinputsbutton", function(){
    return {
        restrict: "E",
        template: "<button id='{{$index}}' class=\"count-btn ion-arrow-down-b\" ng-click=\"decrement()\" ng-init=\"count=0\" removeinputs><span class=\"ion-minus-round\">-</span></button>"
    }
});

//Directive for removing inputs on click
myApp.directive('removeinputs', function(){
  return function(scope, element){
    element.bind('click', function(){

      document.getElementById('space-for-inputs').removeChild(document.getElementById('space-for-inputs').lastChild);

    });
  };
});