angularJS and ng-model strange behavior

Question

Question is simple - why this work like this work?

angular.module('test1', [])
    .directive('myDir', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<input type="text">',            
        };
    }).directive('nogo', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<div><input type="text"></div>',            
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test1">
    <my-dir ng-model="test"></my-dir>
    <nogo ng-model="test"></nogo>
    <input type="text" ng-model="test"/>
</body>

The only difference between two directive is that template for second wrapped with 'div'.

But one work, another doesn't.

Really - I don't understand - why working one is on. But it is.

Ankur Soni · Accepted Answer · 2016-04-01 14:47:55Z

1

the problem is ng-model does not work on div.

change :

.directive('nogo', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<div><input type="text"></div>',            
        };
    });

to

.directive('nogo', function() {
    return {
        replace:true,
        restrict: 'E',
        template: '<div><input ng-model='test' type="text"></div>',            
    };
});

dont forget to remove ng-model from <nogo>*remove ng-model*</nogo> it is working..

answered Apr 1, 2016 at 14:47

Ankur Soni

7566 silver badges19 bronze badges

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

1 Comment

Monochromie Over a year ago

I don't get it. ng-model does not work on div? I did NOT ask it for that. Why binding is working in first example - I do NOT any point to ng-model!! Can you point me to documentation, that can explain that? I know about restrict for root-tag on template, but can't link all it together.

Community · Accepted Answer · 2017-05-23 12:31:32Z

0

Your problem here is that you are applying the model to the <div>, here is another question with more information about this problem.

And in this particular case you can change the bind into the template in order to make it work.

angular.module('test1', [])
    .directive('myDir', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<input type="text">',            
        };
    }).directive('nogo', function() {
        return {
            replace:true,
            restrict: 'E',
            template: '<div><input type="text" ng-model="test"></div>',            
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test1">
    <my-dir ng-model="test"></my-dir>
    <nogo ng-model="test"></nogo>
    <input type="text" ng-model="test"/>
</body>

Also on the ng-model docs says:

The ngModel directive binds an input,select, textarea (or custom form control)

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 1, 2016 at 14:51

Crisoforo Gaspar

3,8402 gold badges23 silver badges27 bronze badges

1 Comment

Monochromie Over a year ago

Thanks, but I know about "input/select/textarea". Main question is - why does first example work? If I made custom-directive, and use ng-model, then it automatically binds to template to special tags ("input/select/textarea")? But if there are two inputs? Then Angular ask me to wrap it with root-tag, right? <DIV>, for example, and default binding will switch off??

Collectives™ on Stack Overflow

angularJS and ng-model strange behavior

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related