Question

我有以下指令。指令属性在计数器按钮上运行，并在每次单击增量器按钮时向表单添加文本输入元素。每个添加的输入都独立地输入文本，直到我将ng-model添加到指令的模板中。然后，当我输入一个输入时，它们会一起更新。

如何让指令为每个添加的输入提供自己的范围，同时仍然对所有这些使用相同的ng-model ='equipment.equipment_name'？

此外，添加输入的计数器按钮和相应输入的空间位于ng-repeat本身。因此，在相同的形式中，我显示了多种类型的设备。用户可以依次具有任何一种类型设备的多个实例。我需要它们能够为任何类型的每个实例分配唯一的名称。

myApp.directive('addinputs', function ($compile) {
  return {
    restrict: 'A',
    scope: true,
    link: function (scope ,element) {

      //binds to a button intended to add text inputs to my form
      element.bind('click', function () {

        //refers to a div that has a binding to a counter value
        var resourceParents = document.getElementsByClassName('count');

        //initial number of inputs needed to get names for the resource category
        var resourceChildren = 0;

        //References multiple resource categories where inputs will be added
        var childId = 'space-for-inputs' + scope.$index;

        //Updates the count for the number of inputs needed
        for (var i = 0; i < resourceParents.length; i++) {
          resourceChildren += parseInt(resourceParents[i].innerHTML);
        };

        var inputTemplate = "<div class='\resource-name-input input_wrapper\'><input ng-model='\equipment.equipment_name\' type='\text\' name='\textInput\'></div>"

        //adds the new input above the previous
        angular.element(
            document.getElementById(childId))
            .append($compile(inputTemplate)(scope)
        );

        scope.$apply();
      });
    }
  };
});

Answer 1

您可以通过调用scope.$new()并将其传递到$compile语句来创建新范围。但我不认为这会做你想要的。看看这个plunker。

它在作用域上创建一个inputs数组，并在每次按下按钮时添加一个输入对象。视图对每个输入执行ng-repeat，并使用它自己的范围呈现input元素。（范围是自动生成的，因为我在此示例中使用了ng-include。

Answer 2

您可能希望使用数组来存储多个输入元素的数据。请在此处查看我的更新：http://jsfiddle.net/53m6max7/

我还使用ng-repeat添加输入元素而不是仅仅添加它们。因为ng-repeat有多个子范围。它确保设备名称值在差值输入中具有差值。

    scope.equipments = scope.equipments || []; //prepare the array
    scope.equipments.push({}); //add new item

    var resourceNameInput = document.getElementsByClassName('resource-name-input');

    if(resourceNameInput.length === 0) {
      //add an ng-repeat element, but only one time  
      var inputTemplate = "<div class=\'resource-name-input input_wrapper\' ng-repeat=\'equipment in equipments\'><input ng-model=\'equipment.equipment_name\' type=\'text\' name=\'textInput\'></div>";

      //adds the new input above the previous
      angular.element(
          document.getElementById(childId))
          .append($compile(inputTemplate)(scope)
      );
    }

如何获得附加到表单的输入的ng模型以具有自己的范围？

2 个答案: