AngularJS - директива ngModel не обновляется

Question

У меня есть хорошее понимание директив AngularJS, но я думаю, что у меня что-то отсутствует с моими директивами.

Неправильно: При загрузке начальной страницы ngModel запускается правильно, и я успешно получаю данные и смоделирован на входе.

Все, что я делаю после ... не работает. Если я изменяю текст на входе, модель не обновляется.

Обратите внимание, что если я не использую директиву (прямой HTML), она работает нормально.


У меня есть директива, как так:

.directive('defaultFormGroup', function() { 
    return { 
     restrict: 'A', 
     templateUrl: 'form-group.html', 
     replace: true, 
     scope: { 
      uniqueId: '@', 
      labelTitle: '@', 
      placeholderText: '@', 
      ngModel: '=', 
      bsLabelClasses: '@', 
      bsFormControlClasses: '@' 
     } 
    }; 
}) 

шаблон Директивы:

<div class="form-group"> 

    <label class="{{bsLabelClasses}} control-label text-left" for="{{uniqueId}}">{{labelTitle}}</label> 

    <div class="{{bsFormControlClasses}}"> 
     <input type="text" class="form-control" id="{{uniqueId}}" placeholder="{{placeholderText}}" data-ng-model="ngModel"> 
    </div> 

</div> 

А вот как я называю директиву в шаблоне:

<div data-default-form-group 
    data-label-title="Name" 
    data-placeholder-text="Name" 
    data-unique-id="name" 
    data-bs-label-classes="col-sm-2 col-md-2" 
    data-bs-form-control-classes="col-sm-3 col-md-3" 
    data-ng-model="site.name"> 
</div> 

У меня также есть та же самая проблема с кнопками радио:

.directive('radioSwitch', function() { 
    return { 
     restrict: 'A', 
     templateUrl: 'radio-switch.html', 
     replace: true, 
     scope: { 
      ngModel: '=', 
      radioName: '@', 
      firstId: '@', 
      firstValue: '@', 
      firstLabel: '@', 
      secondId: '@', 
      secondValue: '@', 
      secondLabel: '@', 
     } 
    }; 
}) 

Шаблон:

<input type="radio" name="{{radioName}}" value="{{firstValue}}" id="{{firstId}}" data-ng-model="ngModel"> 
<label for="{{firstID}}">{{firstLabel}}</label> 

<input type="radio" name="{{radioName}}" value="{{secondValue}}" id="{{secondId}}" data-ng-model="ngModel"> 
<label for="{{secondID}}">{{secondLabel}}</label> 

HTML:

<div data-radio-switch 
    data-ng-model="site.existingCustomer" 
    data-first-label="Yes" 
    data-second-label="No" 
    data-radio-name="existingCustomer" 
    data-first-value="True" 
    data-first-id="true" 
    data-second-value="False" 
    data-second-id="false"> 
</div> 

Что мне не хватает?

UPDATE я что-то в моей директиве не хватает ... Я хочу, чтобы выбрать inputType (текст, электронной почты, пароль и т.д. ...)

Если это текстовое поле, то HTML отличается. .. но кажется, что эта линия не работает data-ng-if=" inputType !== textarea "> ... если я удалю ее, она работает

Кто-нибудь знает почему?

Вот plunker: http://plnkr.co/edit/ITElF2epihSALeTutQAz

Answer 1

не кажется Там быть soething неправильно с самой директивой: смотрите на приведенном ниже примере с директивой, вы можете увидеть, что model, который является атрибутом директивы ng-model получает обновлено.Так что, пожалуйста, попытайтесь воспроизвести проблему, чтобы мы могли помочь Вам (либо встроенный сниппета или jsfiddle, или просто больше кода)

angular.module('test', []) 
 

 
.controller('ctrl', function($scope) { 
 
    $scope.model = 'foo'; 
 
}) 
 

 
.directive('defaultFormGroup', function() { 
 
    return { 
 
     restrict: 'A', 
 
     template: '<div class="form-group"> <label class="{{bsLabelClasses}} control-label text-left" for="{{uniqueId}}">{{labelTitle}}</label> <div class="{{bsFormControlClasses}}"> <input type="text" class="form-control" id="{{uniqueId}}" placeholder="{{placeholderText}}" data-ng-model="ngModel"> </div> </div>', 
 
     replace: true, 
 
     scope: { 
 
      uniqueId: '@', 
 
      labelTitle: '@', 
 
      placeholderText: '@', 
 
      ngModel: '=', 
 
      bsLabelClasses: '@', 
 
      bsFormControlClasses: '@' 
 
     } 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="test" ng-controller="ctrl"> 
 
    <div>model: {{model}}</div> 
 
    <div default-form-group ng-model="model"></div> 
 
</div>

Update: кажется, что проблема исходит от нг -if, как воспроизводится в следующем фрагменте. Он исправляется с помощью nh-show вместо этого, поскольку ng-if может потерять привязку вашей директивы. Однако я не совсем понимаю точную причину.

angular.module('test', []) 
 

 
.controller('ctrl', function($scope) { 
 
    $scope.model = 'foo'; 
 
}) 
 

 
.directive('defaultFormGroup', function() { 
 
    return { 
 
     restrict: 'A', 
 
     template: '<div ng-if="true"><input type="text" data-ng-model="ngModel" /></div>', 
 
     replace: true, 
 
     scope: { 
 
      ngModel: '=' 
 
     } 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="test" ng-controller="ctrl"> 
 
    <div>model: {{model}}</div> 
 
    <div default-form-group ng-model="model"></div> 
 
</div>