AngularJS 指令不更新 IE 11 中 textarea 上的 ng-model

Question

运行遇到了一个奇怪的问题，无法解决。基本上，我有一个管理下拉菜单的指令，当有人选择“其他”选项时，它会显示一个跟踪字符串值的指令。它在大多数浏览器中工作得很好，但由于某些原因在 IE11 中，textarea 元素中的 ng-model 永远不会在绑定控制器中更新（随后也不会在任何父控制器中更新）。

vm.selected（lr-plan-picker 属性）是一个 javascript 对象，id 和 body 属性。我试过注释掉我正在使用的隐藏输入元素，并分别将其包装在 ng-if 中，但这也没有用。在以下示例中，我从未在 <span ng-bind-html="vm.selected.body"></span> 元素中看到任何值。此外，代码从不在 this.selected.body 上执行 $watch，因此由于某种原因，摘要不会触发以让此作用域知道 DOM?

发生了变化

我很感激你能提前提供任何见解，我希望我错过了一些非常明显的东西，因为我觉得我已经尝试了一切。

Directive/Controller:

function lrPlanPicker() {
    return {
        scope: {
            selected: '=lrPlanPicker',
            provider: '=',
            disabled: '=',
            name: '@',
            onSelect: '&',
            optedOut: '='
        },
        restrict: 'A',
        templateUrl: require('@/src/app/referral/partials/plan-picker.tpl.html'),
        controllerAs: 'vm',
        controller: PlanPickerController,
        bindToController: true
    };
}

class PlanPickerController {
    constructor($scope) {            
        $scope.$watch(() => {
            return this.selected ? this.selected.body : null;
        }, function (newVal) {
            console.log(newVal);
        });

        this.init();
    }

    selectPlan(plan) {
        if (plan === 'other') {
            plan = {
                id: 0,
                body: '',
                name: 'Other'
            };
        } else {
            plan.body = plan.id;
        }

        this.selected = plan;

        this.onSelect({ plan: plan });
    }
}

指令模板（计划-picker.tpl.html）：

<div class="lr-plan-picker">
    <input type="hidden"
           ng-attr-name="{{vm.name}}"
           ng-model="vm.selected.id"
           ng-if="vm.selected.id !== 0 && !vm.optedOut"
           required />

    <input type="hidden"
           ng-attr-name="{{vm.name}}"
           ng-model="vm.selected.body"
           ng-if="vm.selected.id === 0 && !vm.optedOut"
           required />

    <div uib-dropdown class="btn-group">
        <button type="button" uib-dropdown-toggle class="btn btn-primary dropdown-toggle" ng-disabled="vm.disabled">
            {{ vm.selected && vm.selected.name ? vm.selected.name : 'Select Plan' }} <span class="caret"></span>
        </button>
        <a lr-plan-preview="vm.selected" ng-if="vm.selected && vm.selected.id" class="plan-helper">
            <i class="fa fa-question-circle-o fa-lg text-primary"></i>
        </a>
        <ul class="dropdown-menu">
            <li ng-show="vm.dropdown.loading">
                <div class="text-center"><i class="fa fa-spin fa-spinner"></i></div>
            </li>
            <li ng-repeat="plan in vm.dropdown.plans">
                <a ng-click="vm.selectPlan(plan)">{{ plan.name }}</a>
            </li>
            <li ng-if="!vm.dropdown.loading">
                <a ng-click="vm.selectPlan('other')">Other</a>
            </li>
        </ul>
    </div>
    <textarea ng-if="vm.selected.id === 0 && !vm.optedOut"
              ng-model="vm.selected.body"
              ng-disabled="vm.disabled"
              required
              maxlength="100"
              ng-attr-name="{{vm.name}}-other"
              class="form-control m-t-sm"></textarea>
    <span ng-bind-html="vm.selected.body"></span>
</div>

模板使用指令 (controller.tpl.html):

<div lr-plan-picker="vm.selectedPlan"
     name="selectedPlan"
     provider="vm.selectedProvider"
     on-select="vm.onSelectPlan(plan)"
     disabled="vm.isOptedOut || vm.isDontKnow"
     opted-out="vm.isOptedOut">
</div>

更新：因此，通过消除过程（即我一直在删除代码直到它开始工作），似乎 disabled 属性是导致问题的原因。当我从 controller.tpl.html 模板中删除 disabled 属性时，ng-model 得到了尊重。不确定是什么原因造成的，但是当我将指令属性从 disabled 更改为 isDisabled 并更新我对该指令的使用时，它似乎起作用了。我没有时间弄清楚为什么 IE11 对指令和禁用属性做了一些奇怪的事情，但如果有人有任何见解，我很想知道。一旦允许，我会在几天内将其标记为已回答。

Answer 1

因此，通过消除过程（即我一直在删除代码，直到它开始工作），似乎禁用属性是导致问题的原因。当我从 controller.tpl.html 模板中删除 disabled 属性时，ng-model 得到了尊重。不确定是什么原因造成的，但是当我将指令属性从 disabled 更改为 isDisabled 并更新我对该指令的使用时，它似乎起作用了。我没有时间弄清楚为什么 IE11 会使用指令和禁用的东西做一些奇怪的事情属性，但如果有人有任何见解，我很想知道。

AngularJS 指令不更新 IE 11 中 textarea 上的 ng-model

AngularJS directive not updating ng-model on textarea in IE 11

javascript

angularjs

angularjs-directive

internet-explorer-11