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

Question

遇到一個奇怪的問題，無法弄清楚。 基本上，我有一個管理下拉列表的指令，當有人選擇“其他”選項時，它會顯示一個跟蹤字符串值的指令。 它在大多數瀏覽器中都能正常工作，但由於某種原因，在 IE11 中，textarea 元素中的 ng-model 永遠不會在綁定的 controller 中更新（隨后也不會在任何父控制器中更新）。

vm.selected（lr-plan-picker 屬性）是一個具有 id 和 body 屬性的 javascript object。 我已經嘗試注釋掉我正在使用的隱藏輸入元素，並將它們單獨包裝在一個 ng-if 中，但這也不起作用。 在以下示例中，我從未在<span ng-bind-html="vm.selected.body"></span>元素中看到任何值。 此外，代碼永遠不會在 this.selected.body 上執行 $watch，所以由於某種原因，摘要沒有觸發讓這個 scope 知道 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 屬性做了一些奇怪的事情，但是如果有人有任何見解，我很想知道。