动态设置NG-模型是打破

textinput.html

<label for="{{name}}">{{label}}</label> 
<input type="{{type}}" placeholder="{{placeholder}}" id="{{name}}" ng-model="{{name}}">

标签正确输出，但是输入字段内一切outputing静态{{varname}}

如果我删除了NG-模式是这样的：

<input type="{{type}}" placeholder="{{placeholder}}" id="{{name}}">

它正确地输出变量，但是当我放入ng模型并动态地为它赋值时，它会中断整个输入。

这是怎么发生的？

我的目标是能够创建简单的1行文字输入，我可以大规模使用的指令改变，就像这样：

<textinput name="username" label="Username" type="text" placeholder="Enter Username"></textinput>

来源

2015-04-23 Jordash

一旦从指令中设置模型，您打算如何访问模型？如果每次都有所不同，你不会真正知道$ scope上的模型被调用。 – Chris

我试图通过这样的指令调用它： '' – Jordash

尝试设置ng-model = “name” – Hoyen

终于想通了，你必须通过传递NG-模型使用2路这样的结合：

<textinput type="email" name="userEmail" ng-model="userEmail" placeholder="Email Address..." label="Email"></textinput>

app.directive('textinput', function() { 
return { 
    restrict: 'E', 
    scope: { 
     label:'@label', 
     placeholder:'@placeholder', 
     name: '@name', 
     type: '@type', 
     ngModel: '=ngModel' 
    }, 
    transclude: true, 
    templateUrl: 'directives/textinput.html' 
}; 
});

现在模板HTML网络内您可以在没有使用ng-model的{{ }}的情况下映射属性。

例如：

<label for="{{name}}">{{label}}</label> 
<input type="{{type}}" placeholder="{{placeholder}}" id="{{name}}" ng-model="ngModel">

现在，这将是超级容易快速地生成可重复使用的表单代码。

来源

2015-04-23 05:48:17 Jordash

动态设置NG-模型是打破

回答

相关问题