AngularJS 具有索引范围变量数组的动态模板

Question

我正在使用 AngularJS 并尝试创建一个可以动态添加新输入的表单，类似于此 fiddle：http://jsfiddle.net/V4BqE/（下面的主要 HTML ，fiddle 中的工作代码）。

<div ng-app="myApp" ng-controller="MyCtrl">
  <div add-input>
    <button>add input</button>
  </div>
</div>

我希望能够为我的表单使用 HTML 模板，因为我添加的输入大约有 300 行长。我的问题是我不知道如何在模板中使用时索引包含数据的范围变量。我试图在 plnkr http://plnkr.co/edit/4zeaFoDeX0sGTuBMCQP2?p=info 上制作我自己的上述代码的修改版本。但是，当我单击按钮时，没有出现任何表单元素。

在线 (plnkr) 我的 template.html 收到 404 未找到，但我认为这只是 plnkr 的限制。在我使用 Python HttpServer 的机器上，当使用 $http.get 方法时，我得到 $templateRequest 的 Error: [$parse:syntax] 和 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. 。

有什么建议可以让索引范围变量数组与外部 html 文件一起使用吗？

谢谢，JR

编辑：更新 plnkr link

Answer 1

你可以在没有指令和外部模板的情况下做到这一点

您尝试执行的操作不需要指令（使用基本 angularjs 工具实际上非常简单）

http://plnkr.co/edit/LVzGN8D2WSL2nR1W7vJB?p=preview

html

<body>

  <div class="container" ng-app="myApp" ng-controller="MyCtrl">

    <button class="btn btn-primary" type="button" ng-click="addPhoneInput()">add input</button>

    <form>
      <div ng-repeat="item in telephoneNumbers">
        <hr>
        <input type="text" ng-model="item.phone">
      </div>
    </form>
    
    
    <hr>
    
    <div class="well">
      <h4>Phone Numbers,</h4>
      <p ng-repeat="item in telephoneNumbers">{{item.phone}}</p>
    </div>
  </div>
</body>

js

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

app.controller('MyCtrl', ['$scope', function($scope) {
  // Define $scope.telephone as an array
  $scope.telephoneNumbers = [];

  $scope.addPhoneInput = function() {
    $scope.telephoneNumbers.push({});
  };

  // This is just so you can see the array values changing and working! Check your console as you're typing in the inputs :)
  $scope.$watch('telephoneNumbers', function(value) {
    console.log(value);
  }, true);
}]);

如果您坚持使用指令，

http://plnkr.co/edit/BGLqqTez2k9lUO0HZ5g1?p=preview

phone-number.template.html

<div>
  <hr>
  <input type="text" ng-model="ngModel" >
</div>

html

<body>

  <div class="container" ng-app="myApp" ng-controller="MyCtrl">

    <button class="btn btn-primary" type="button" ng-click="addPhoneInput()">add input</button>

    <form>
      <phone-number ng-repeat="item in telephoneNumbers" ng-model="item.phone"></phone-number>
    </form>
    
    
    <hr>
    
    <div class="well">
      <h4>Phone Numbers,</h4>
      <p ng-repeat="item in telephoneNumbers">{{item.phone}}</p>
    </div>
  </div>
</body>

js

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

app.controller('MyCtrl', ['$scope', function($scope) {
  // Define $scope.telephone as an array
  $scope.telephoneNumbers = [];

  $scope.addPhoneInput = function() {
    $scope.telephoneNumbers.push({});
  };

  // This is just so you can see the array values changing and working! Check your console as you're typing in the inputs :)
  $scope.$watch('telephoneNumbers', function(value) {
    console.log(value);
  }, true);
}]);

app.directive('phoneNumber', function(){
  return {
    replace:true,
     scope: {
      ngModel: '=',
    },
    templateUrl: "phone-number.template.html"
  }
});

AngularJS 具有索引范围变量数组的动态模板

AngularJS Dynamic Template with indexed scope variable arrays

html

javascript

python

angularjs

dynamicform

你可以在没有指令和外部模板的情况下做到这一点

http://plnkr.co/edit/LVzGN8D2WSL2nR1W7vJB?p=preview

如果您坚持使用指令，

http://plnkr.co/edit/BGLqqTez2k9lUO0HZ5g1?p=preview