Angular: Building a directive and remove attribute from root element

Question

Is it possible to do something like this:

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

which would be compiled to:

<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>

I tried to make a example, but Plunker wouldn't let me save my example... uploaded it to dropbox: https://dl.dropbox.com/u/2862814/plunk.zip

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.

user2264760 · Accepted Answer · 2013-04-10 08:16:48Z

3

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()" ...

Change this to

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

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:'&' ...

and finally the directive template

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

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:'@'}
  }
})

answered Apr 10, 2013 at 8:16

user2264760

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Sebald Over a year ago

Thx. I thought about that, but hoped it is possible to "move" expression to another element. Because the downside of this approach is, that every temnplate has ng-change. This makes it hard to debug it later and makes the HTML very unclean.

Collectives™ on Stack Overflow

Angular: Building a directive and remove attribute from root element

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related