角：建立一个指令，并从发根元素中删除属性 [英] Angular: Building a directive and remove attribute from root element

问题描述

是否有可能做这样的事情：

Is it possible to do something like this:

＆LT;外地：文本ID =富标签=富标签模型=model.foo占位符=富/＆GT;

这将被编译为：

<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-变化的东西打破。这是由于在NG-改变指令的汇编。我和一个高优先级的fieldText指令尝试过，但并没有解决它。

The example breaks with stuff like ng-change. This is due the compilation of the ng-change directive. I tried it with a high priority to the fieldText directive, but doesn't fix it.

推荐答案

您为pretty在你的榜样亲近，但你必须把NG-变化对输入字段的模板。您的旧code：

You were pretty close with in your example, but you have to put ng-change on the input-field in the template. Your old code:

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

更改为

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

和该指令（见 http://docs.angularjs.org/guide/directive - ＆安培;或放大器; attr指示 - 提供了一种方法来执行父范围的上下文中的前pression）

and in the directive (see http://docs.angularjs.org/guide/directive - & or &attr - provides a way to execute an expression in the context of the parent scope.)

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

和最后的指令模板

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

下面是一个modiefied和工作plunkr： http://plnkr.co/edit / QmQjGQQBRtDmkCka0dul？p = preVIEW

Here is a modiefied and working plunkr: 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:'@'}
  }
})

这篇关于角：建立一个指令，并从发根元素中删除属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！