CODEWITHSUNDEEP
angularjsangularjs-directive
richbai90
richbai90

Reputation: 5204

How to pass ng-model from directive to template

Given the following directive defnintion

app.directive('myDirective', () => (
    {
        restrict: 'E'
        require: 'ngModel',
        template: '<div id='wrapper'><input ngChange="change" /></div>'
        scope: {change: '='},
        link: ...
    }
))

If I use it like this

<my-directive change="change" ng-model="myModel" />

How do I pass ng-model from my-directive to the input

Upvotes: 1

Views: 706

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Use one-way < for binding inputs and $setViewValue for setting output: 

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        template:
            `<div id='wrapper'>
                 <input ng-change="change(inputValue)" ng-model="inputValue" />
             </div>`,                  
        scope: {inputValue: '<ngModel'},
        link: postLink              
    };
    function postLink(scope, elem, attrs, ngModel) {
        scope.change = function(value) {
            ngModel.$setViewValue(value);
        };
    }
})

Usage:

<form name="form1">
    <my-directive name="item1" ng-model="myModel" ng-change="func1()">
    </my-directive>
</form>

The ng-change directive will be added automatically by the ngModelController.

The AngularJS framework will put the ngModelController API on scope as $scope.form1.item1.

For more information, see

Upvotes: 1

Related Questions