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

Question

Running into a weird issue and not able to figure it out. Basically, I have a directive that manages a dropdown, and when someone chooses the "Other" option, it displays a that tracks a string value. It works perfectly fine in most browsers, but for some reason in IE11 the ng-model in the textarea element never updates in the bound controller (and subsequently doesn't update in any parent controllers either).

vm.selected (the lr-plan-picker attribute) is a javascript object with an id and body property. I've tried commenting out the hidden input elements I was using, as well as wrapped the in an ng-if separately, but that didn't work either. In the following example, I don't ever see any value in the <span ng-bind-html="vm.selected.body"></span> element. Also, the code never executes the $watch on this.selected.body, so for some reason the digest isn't triggering to let this scope know there has been changes to the DOM?

I appreciate any insight you can give in advance, I'm hoping I've missed something super obvious, because I feel like I've tried everything.

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

Directive Template (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>

Template using the directive (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>

UPDATE: So, by process of elimination (ie I kept removing code until it started working), it seems like the disabled attribute is what's causing the issue. When I remove the disabled attribute from the controller.tpl.html template, the ng-model is respected. Not sure what's causing this, but when I changed the directive property from disabled to isDisabled and updated my usage of the directive, it seems to work. I don't have time to figure out why IE11 is doing something weird with directives and the disabled property, but if anyone has any insight I'd love to know. I'll mark this as Answered in a few days once it allows me to.

Answer 1

So, by process of elimination (ie I kept removing code until it started working), it seems like the disabled attribute is what's causing the issue. When I remove the disabled attribute from the controller.tpl.html template, the ng-model is respected. Not sure what's causing this, but when I changed the directive property from disabled to isDisabled and updated my usage of the directive, it seems to work. I don't have time to figure out why IE11 is doing something weird with directives and the disabled property, but if anyone has any insight I'd love to know.