ng-model可以用作指令属性而不绑定到模板<input />吗?

时间:2013-07-04 17:04:21

标签: angularjs angularjs-directive

是否可以在指令(ng-model)中使用NgModelController而不将其绑定到<input>标记,该标记是替换指令标记的模板标记集?

** 编辑 - 这是一个具有所需功能的fiddle,但span包装模板

除外

如果我被授予了一个愿望,我希望定义一个这样的指令:

<multi-component-zip ng-model='address.zipCode' size="10"/>

其中multi-component-zip指令定义为属性:

template: '<input ng-model="collapsedZip" ng-pattern="/^[0-9]{5}(-[0-9]{4})?$/" type="text" />', 
replace: true,
require: 'ngModel'

此处的模板ng-model将与指令本身分开处理。

我想在指令中使用collapsedZip来修改address.zipCode的值,其类似于:{base: '90210', plusFour: '1234'}来自NgModelController

但是,当然,实际上来自父级的ng-model被应用于<input>所以我得到一个错误:

Multiple directives [ngModel, ngModel] asking for 'ngModel' controller on: <input ng-model="address.zipCode collapsedZip" ... >

也许另一种方法是避免对collapsedZip使用ng-model,而是在输入元素上直接进行DOM操作以读取/显示用户的输入。

这很好,除了ng-model属性仍然从父标记继承而且违背了指令的目的,因为它绑定到<input>

那么为什么不将template <input>包含在另一个元素中,例如<span>?这会将两个ng-model分开。好吧,应该继承其他<input>属性,例如size=10

而不是ng-model将数据绑定到指令我可以使用自定义属性并使用监视表达式或其他方法将address.zipCodecollapsedZip同步。这样可行。但是,如果我可以使用ng-model,那么使用我为验证编写的其他指令会让生活变得更轻松。

0 个答案:

没有答案