0

次のようなことは可能ですか？

<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 で例を保存できませんでした... ドロップボックスにアップロードしました: https://dl.dropbox.com/u/2862814/plunk.zip

この例は、ng-change などで壊れています。これは、ng-change ディレクティブのコンパイルによるものです。fieldText ディレクティブを優先してやってみましたが直りません。

4

1 に答える 1

3

あなたの例ではかなり近かったですが、テンプレートの入力フィールドに ng-change を配置する必要があります。古いコード:

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

これをに変更

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

およびディレクティブ内 ( http://docs.angularjs.org/guide/directiveを参照- & または &attr - 親スコープのコンテキストで式を実行する方法を提供します)。

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

最後にディレクティブ テンプレート

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

これは変更された動作中の 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:'@'}
  }
})
于 2013-04-10T08:16:48.493 に答える