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

Question

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

vm.selected（lr-plan-picker 属性）是一个带有 id 和 body 属性的 javascript 对象。我已经尝试注释掉我正在使用的隐藏输入元素，并将它们单独包装在一个 ng-if 中，但这也不起作用。在以下示例中，我从未在 <span ng-bind-html="vm.selected.body"></span> 元素中看到任何值。此外，代码永远不会在 this.selected.body 上执行 $watch，所以由于某种原因，摘要没有触发让这个范围知道 DOM 发生了变化？

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

指令/控制器：

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 });
    }
}

指令模板（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 对指令和 disabled 属性做了一些奇怪的事情，但是如果有人有任何见解，我很想知道。一旦允许，我会在几天后将此标记为已回答。

Answer 1

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