AngularJS - Inherit ngModel in custom directive

Question

I have a custom directive like this:

myText.html:

<div>
<label>{{label}}</label>
<input type="text" class="form-control" >
</div>

Javascript:

app.directive("myText", function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: "shared/form/myText.html",
        scope : {
            label : "@",
        }
    };
});

I just want to wrap an input and handle a label as an attribute.

In my view i use the directive this way:

<my-text label="Name" ng-model="person.firstname"></my-text>

The problem is that ng-model is not binding the model to my input.

What is the correct way to achieve this result? Thanks

Explosion Pills · Accepted Answer · 2015-03-16 17:04:19Z

1

Put ng-model on the input and bind it to the isolate scope.

<my-text label=Name model=person.firstname></my-text>

<input type="text" class="form-control" ng-model=model>

return {
    restrict: 'E',
    replace: true,
    templateUrl: "shared/form/myText.html",
    scope : {
        label : "@",
        model: "=",
    }
};

answered Mar 16, 2015 at 17:04

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

2 Comments

Rob80 Over a year ago

Thank you! Should I use a new attribute name such as 'model' or 'ngModel' as a best practice? I tried { model : "=ngModel"} and that worked...

Explosion Pills Over a year ago

@Rob80 I would use a name that makes sense and also try not to overload existing directive names

Collectives™ on Stack Overflow

AngularJS - Inherit ngModel in custom directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related