AngularJS custom directives

Question

I'm creating template for text inputing using angular directives. Directive will receive 3 attributes: title, placeholder and model. I need attribte model to be implemented into atribute ng-model in directive template.

For example: if i create element with next attributes

<ng-text-input model="test" title="First name" placeholder="First name"></ng-text-input>

result will be next:

<div class="form-group">
    <label class="col-sm-2 control-label">First name</label>
    <div class="col-sm-9">
        <input ng-model="test" type="text" class="form-control" placeholder="First name">
    </div>
</div>

And how can i use model "test" in parent scope?

Thanks

upadete after @Maxdow comment:

directive declaration:

app.directive('ngTextInput', function(){
    return {
        restrict : 'AE',
        scope: {
            title: '@',
            placeholder : '@',
            myModel: '=ngModel'
        },
        templateUrl : 'ng-textInput.html'
    }
});

template:

<script type="text/ng-template" id="ng-textInput.html">
    <div class="form-group">
        <label class="col-sm-2 control-label">{{title}}</label>
        <div class="col-sm-9">
            <input ng-model="myModel" type="text" class="form-control" placeholder={{placeholder}}>
        </div>
    </div>
</script>

using:

<ng-text-input ng-model="test" title="First name" placeholder="First name"></ng-text-input>

but result is still:

<div class="form-group">
        <label class="col-sm-2 control-label ng-binding">First name</label>
        <div class="col-sm-9">
            <input ng-model="myModel" type="text" class="form-control ng-pristine ng-valid" placeholder="First name">
        </div>
    </div>

What am i doing wrong?

you need to bind it to your directive scope in the directive declaration (which you omitted in your post) — Sebastian
– Sebastian, Commented May 7, 2014 at 7:19
Is your directive in the same controller of your test model ? — Maxdow
– Maxdow, Commented May 7, 2014 at 7:44
Your result seems correct. The ng-model attribute don't change. It's only the value of the input . And if the data binding is correct, your model input can control your model — Maxdow
– Maxdow, Commented May 7, 2014 at 7:48
Thank you very much, guys! I was concerned, because ng-models name in directives body is "myModel" and i thought, that it must be the same as in directive defenition. And i didn't set value to model for checking. Thank you! My example on JsFiddle: jsfiddle.net/yXaY7 — V. Gamula
– V. Gamula, Commented May 7, 2014 at 8:10

Maxdow · Accepted Answer · 2014-05-07 08:13:27Z

4

In your directive bind your attribute with ngModel :

app.directive('myDirective', function() {
  return {
  restrict: 'AE', 
  scope: {
    myModel: '=ngModel'
  },
  template:'<input ng-model="myModel"/>'
}});

You should be able to use is from your HTML like this :

<my-directive ng-model="whatyouwant"></my-directive>

An example : http://jsfiddle.net/maxdow/6GU6x/

edited May 7, 2014 at 8:13

answered May 7, 2014 at 7:21

Maxdow

1,00611 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

AngularJS custom directives

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related