Блог

Столкнулся со странной проблемой и не смог ее решить. По сути, у меня есть директива, которая управляет выпадающим списком, и когда кто-то выбирает опцию «Другое», он отображает a, который отслеживает строковое значение. Она отлично работает в большинстве браузеров, но по какой-то причине в IE11 ng-model в элементе textarea никогда не обновляется в привязанном контроллере (и впоследствии не обновляется ни в одном родительском контроллере). контроллеры).

vm.selected (атрибут lr-plan-picker) — это объект javascript со свойством id и body. Я пытался закомментировать скрытые элементы ввода, которые я использовал, а также отдельно обернуть в ng-if, но это тоже не сработало. В следующем примере я никогда не вижу никакого значения в <span ng-bind-html="vm.selected.body"></span> элементе. Кроме того, код никогда не выполняет $watch для this.selected.body, поэтому по какой-то причине дайджест не запускается, чтобы сообщить этой области о том, что в DOM произошли изменения?

Я ценю любую информацию, которую вы можете дать заранее, я надеюсь, что пропустил что-то очень очевидное, потому что я чувствую, что перепробовал все.

Директива /Контроллер:

 function lrPlanPicker() {
    return {
        scope: {
            selected: '=lrPlanPicker',
            provider: '=',
            disabled: '=',
            name: '@',
            onSelect: 'amp;',
            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 amp;amp; !vm.optedOut"
           required />

    <input type="hidden"
           ng-attr-name="{{vm.name}}"
           ng-model="vm.selected.body"
           ng-if="vm.selected.id === 0 amp;amp; !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 amp;amp; vm.selected.name ? vm.selected.name : 'Select Plan' }} <span class="caret"></span>
        </button>
        <a lr-plan-preview="vm.selected" ng-if="vm.selected amp;amp; 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 amp;amp; !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 шаблона, соблюдается ng-модель. Не уверен, что является причиной этого, но когда я изменил свойство директивы с disabled на isDisabled и обновил свое использование директивы, кажется, это работает. У меня нет времени выяснять, почему IE11 делает что-то странное с директивами и отключенным свойством, но если у кого-нибудь есть понимание, я хотел бы знать. Я отмечу это как Ответ через несколько дней, как только это позволит мне.

Итак, в процессе устранения (т. Е. Я продолжал удалять код, пока он не начал работать), похоже, что причиной проблемы является отключенный атрибут. Когда я удаляю отключенный атрибут из controller.tpl.html шаблона, соблюдается ng-модель. Не уверен, что является причиной этого, но когда я изменил свойство директивы с disabled на isDisabled и обновил свое использование директивы, кажется, это работает. У меня нет времени выяснять, почему IE11 делает что-то странное с директивами и отключенным свойством, но если у кого-нибудь есть какое-то представление, я хотел бы знать.