Question

我需要创建动态输入，textareas..etc。所以对于每种输入类型，我都有一个单独的模板。因此，文本字段模板可能如下所示：

<script type="text/ng-template" id="/input.html">
    <input type="text" ng-model="model" />
</script>

我想要实现的是这样的：

<div ng-include="" src="'/input.html'" ng-init="model = var1"></div>
<div ng-include="" src="'/input.html'" ng-init="model = var2"></div>

因此我可以使用相同的模板创建文本字段，并为每个模板创建不同的模型。这实际上是有效的并且传递了数据，但如果我在文本字段中输入某些内容，它就不会应用于范围变量。

这里有一个小提琴来说明这一点：http://jsfiddle.net/uAm99/2/

Answer 1

您可以尝试以“角度指令方式”实现此功能。它可以授权HTML标记，例如可重用模板（在您的实现中刚才提到）。这是一个简单的例子：

HTML

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <custom-input data="var1"></custom-input>
    <custom-input data="var2"></custom-input>
    {{var1}}
    {{var2}}
  </div>
</div>

JS

angular.module("myApp",[])
.controller("myCtrl",function($scope){
  $scope.var1 = "foo";
  $scope.var2 = "bar";
})
.directive("customInput",function(){
  return {
    restrict:'E',
    scope: {
        data:"="
    },
    template: '<input type="text" ng-model="data" />'
  };
});

这是一个jsfiddle demo

希望它有所帮助。

angularjs模板中的动态模型

1 个答案: