模板中的Angularjs动态模型

angularjs dynamic model in template

本文关键字：动态 模型 Angularjs      更新时间：2023-09-26

我需要创建动态输入，文本区域等。因此，对于每种输入类型，我都有一个单独的模板。因此，文本字段模板可以像这样:

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

你可以尝试用"angular directive way"来实现这个特性。它可以增强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演示

希望对大家有所帮助

相关文章：