Passing ng-model in nested directives

23,962

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

Share:
23,962
user2794782
Author by

user2794782

Updated on September 15, 2020

Comments

  • user2794782
    user2794782 almost 4 years

    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() { ... }
        }
    });