user2794782 user2794782 - 4 months ago 50
AngularJS Question

Passing ng-model in nested directives

I want to pass my ng-model from the 'outer-directive' to an 'inner-diretive' (which is contained in the outer-directive template).

What is the correct way for doing it?

HTML code:

<body>
<outer-directive ng-model="prop" />
</body>


and directive code:

angular.module('app', []).directive('outerDirective', function(){
return {
template: '<inner-directive ng-model="prop" />',
link: function() { ... }
}
});

Answer

You can set up a bi-directional binding (see the documentation, section "Directive Definition Object") with the variable in ngModel attribute, as with any other directives:

<my-directive ng-model="foo"></my-directive>
myApp.directive('myDirective', function () {
    return {
        template: '<div><input type="text" ng-model="ngModel" /></div>',
        replace: true,
        scope: {
            ngModel : '=',
        },
    };
});

Fiddle