AngularJS : directive in ng-repeat. Scope twoway binding

Question

I have directive with isolated scope and two-way data binding.

    app.directive('inputField', function() {
        return {
            restrict: 'E',
            require: '^ngModel',
            scope: {
                data: '=ngModel',
            },
            template: "<input type='text' ng-model='data' />",
        };
    });

If I put this directive to page. All works fine. Data in page scope and directive scope is equal.
But if I put directive in ng-repeat, directive not populate data to page scope.

How to resolve this problem?

Here's example of code.

why ng-model on parent element?? `require: '^ngModel',` – harishr Aug 25 '14 at 11:18 — harishr, Aug 25 '14 at 11:18

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

check out the working plunker.

<div ng-repeat="d in data2">
    <input-field ng-model="data2[$index]"></input-field>     <br>
</div>

the issue was there because you are using ng-model without dot.

checked it using console.log. read this SO post.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 25 '14 at 11:26

harishr

17,807
9
78
125

This (https://github.com/angular/angular.js/wiki/Understanding-Scopes) article explain bug reasons to me. Thanks for link and help. – ArsenyN Aug 25 '14 at 17:28

AngularJS : directive in ng-repeat. Scope twoway binding

1 Answers1