AngularJS и NG-модель странное поведение

Question

AngularJS и NG-модель странное поведение

0

Вопрос прост - почему эта работа подобна этой работе?

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>

Единственная разница между двумя директивами заключается в том, что шаблон для второго завернут с помощью "div".

Но одна работа, другая - нет.

На самом деле - я не понимаю, почему работает один. Но это.

Monochromie 01 апр. 2016, в 17:11

Источник

Теги:

angularjs

angular-ngmodel

2 ответа

1

проблема в ng-модели не работает на div.

изменение:

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

в

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

Не забудьте удалить ng-model из <nogo>*remove ng-model*</nogo> он работает..

Ankur Soni 01 апр. 2016, в 12:16

0

Я не понимаю нг-модель не работает на div? Я НЕ просил об этом. Почему привязка работает в первом примере - я не имею никакого отношения к ng-модели !! Можете ли вы указать мне документацию, которая может это объяснить? Я знаю об ограничении для корневого тега в шаблоне, но не могу связать все это вместе.
Monochromie 01 апр. 2016, в 14:54

Ещё вопросы

Я не понимаю нг-модель не работает на div? Я НЕ просил об этом. Почему привязка работает в первом примере - я не имею никакого отношения к ng-модели !! Можете ли вы указать мне документацию, которая может это объяснить? Я знаю об ограничении для корневого тега в шаблоне, но не могу связать все это вместе.

Crisoforo Gaspar · Accepted Answer · 2016-04-01T11-59-00.000Z

Ваша проблема заключается в том, что вы применяете модель к <div>, вот еще один вопрос с дополнительной информацией об этой проблеме.

И в этом конкретном случае вы можете изменить привязку в шаблоне, чтобы заставить его работать.

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>

Также в документах ng-model говорится:

Директива ngModel связывает вход, select, textarea (или пользовательский контроль формы)

Спасибо, но я знаю о "input / select / textarea". Главный вопрос - почему работает первый пример? Если я создал пользовательскую директиву и использую ng-модель, то она автоматически привязывается к шаблону со специальными тегами («input / select / textarea»)? Но есть ли два входа? Тогда Angular попросит меня обернуть его корневым тегом, верно? <DIV>, например, а привязка по умолчанию отключится ??