我正在使用 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) 我收到一个 404 not found for my template.html，但我认为这只是 plnkr 的限制。在我的带有 Python HttpServer 的机器上，我收到 $templateRequest 的 Error: [$parse:syntax] 和 TypeError: Failed toexecute 'appendChild' on “Node”:使用 。 $http.get 方法时，参数 1 不是“Node”类型。
对于让索引范围变量数组与外部 html 文件一起使用有什么建议吗？
谢谢，JR
编辑:更新 plnkr 链接
最佳答案
您可以在没有指令和外部模板的情况下完成
你想要做的事情不需要指令(实际上使用基本的 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
电话号码.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"
}
});
关于javascript - 带有索引范围变量数组的 AngularJS 动态模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30666319/