Question

是否可以做这样的事情：

<field:text id="foo" label="Foo Label" model="model.foo" placeholder="foo" />

将编译为：

<div class="control-group">
   <label class="control-label" for="foo">Foo Label</label>
   <div class="controls">
      <input type="text" id="foo" placeholder="foo" ng-model="model.foo">
   </div>
</div>

我试图做一个例子，但是Plunker不会让我保存我的例子......上传到dropbox：https://dl.dropbox.com/u/2862814/plunk.zip

这个例子打破了像ng-change这样的东西。这是由于ng-change指令的编译。我尝试了对fieldText指令的高优先级，但没有解决它。

Answer 1

您的示例中非常接近，但您必须对模板中的输入字段进行ng-change。你的旧代码：

<field:text ng-change="updateHidden()" ...

将此更改为

<field:text change="updateHidden()" ...

并在指令中（参见http://docs.angularjs.org/guide/directive - ＆amp;或＆amp; attr - 提供了一种在父作用域的上下文中执行表达式的方法。）

{scope:{change:'&' ...

最后是指令模板

<input ng-change="change()" ...

这是一个有节制的工作人员：http://plnkr.co/edit/QmQjGQQBRtDmkCka0dul?p=preview

<field:text id="too" label="Too" model="model.too" placeholder="too" change="updateHidden()"></field:text>

<script type="text/ng-template" id="/tpl.html">
<div class="control-group">
   <label class="control-label" for="{{id}}">{{label}}</label>
   <div class="controls">
      <input ng-change="change()" type="text" id="{{id}}" placeholder="{{placeholder}}" 
      ng-model="model">
   </div>
</div>
</script>

directive('fieldText',function(){
  return {
    restrict:'E',
    templateUrl:'/tpl.html',
    scope:{change:'&',id:'@',model:'=',placeholder:'@',label:'@'}
  }
})

Angular：构建指令并从根元素中删除属性

1 个答案: