模板中的angularjs动态模型答案

【问题标题】：angularjs dynamic model in template模板中的angularjs动态模型
【发布时间】：2014-03-27 10:10:55
【问题描述】：

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

<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/

【问题讨论】：

标签： javascript angularjs

【解决方案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>

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

希望对您有所帮助。

【讨论】：

是的，先生，您对这个解决方案完全正确！你让我开心，非常感谢！