angularjs - AngularJS-指令ngModel没有更新

我对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>

我想念什么？

更新
我的指令中缺少某些内容...我想选择inputType(文本，电子邮件，密码等...)

如果是textarea，则HTML会有所不同...但是看来这行不能使用data-ng-if=" inputType !== textarea "> ...如果我删除它，则可以

有人知道为什么吗？

这是一个小矮人:http://plnkr.co/edit/ITElF2epihSALeTutQAz

最佳答案

指令本身似乎没有什么错:看看下面带有指令的示例，您可以看到作为指令的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>

更新:问题似乎来自ng-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>

关于angularjs - AngularJS-指令ngModel没有更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28200355/