Странное поведение NgOptions

Работа с AngularJS версии v1.2.9.
У меня есть страница с двумя контроллерами. Все работает нормально, кроме выбора с помощью ng-options, но только в IE. Chrome работает нормально.
Не могу опубликовать весь код, так как он 1500loc.

Вот фрагмент HTML:

<div class = "auswahlDialog ms-dlgContent">
    <div class = "ms-dlgBorder">
        <div class = "ms-dlgTitle">
            <span class = "ms-dlgTitleBtns" ng-click = "closeUploadDocumentDialog()">
                <span style = "padding: 8px; height: 16px; width: 16px; display: inline-block;">
                    <span class = "s4-clust">
                        <img src = "/_layouts/15/images/fgimg.png?rev=23" alt = "Dialogfeld schließen" class = "ms-dlgCloseBtnImg" />
                    </span>
                </span>
            </span>
            <h2 class = "ms-webpart-titleText">Kunde auswählen</h2>
        </div>
        <div class = "ms-dlgFrameContainer" style = "overflow: hidden;">
            <div class = "neueAkte">
                <table cellpadding = "0" cellspacing = "0" border = "0">
                    <tbody>
                        <tr>
                            <td valign = "middle">Dokumentart:</td>
                            <td>
                                <select ng-model = "betriebsaktart" ng-options = "b.id as b.title for b in betriebsaktarten" style = "background-color: #fff;"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan = "2" align = "right">
                                <div style = "padding-top: 10px;">
                                    <input type = "button" value = "Save" onclick = "return false;" ng-click = "saveItem(betriebsaktart)" class = "ms-ButtonHeightWidth">
                                    <input type = "button" value = "Cancel" ng-click = "closeDialog()" />
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Данные поступают из SharePoint, но представляют собой массив очень простых объектов:

SP.SOD.executeOrDelayUntilScriptLoaded(function(){

    var ctx = SP.ClientContext.get_current();
    var web = ctx.get_web();
    var list = web.get_lists().getById("14995573-DAA6-4334-AE6B-D79CB98EC92C"); //Betriebsaktarten
    var query = new SP.CamlQuery();
    query.set_viewXml('<View><Query><OrderBy><FieldRef Name = "Title"/></OrderBy></Query></View>');
    var items = list.getItems(query);
    ctx.load(items);
    ctx.executeQueryAsync(function() { 

        $scope.betriebsaktarten = items.get_data().map(function(item){
            return {
                id: item.get_id(),
                title: item.get_item('Title'),
            }
        });
        $scope.$digest();

    }, function(request, error) { 
        $scope.$digest();
        showError(error);
    })
}, 'SP.js')

Для разработчиков, не относящихся к SharePoint: необходимо вызвать $scope.$digest();, поскольку SP.SOD.executeOrDelayUntilScriptLoaded является асинхронным.

В Chrome работает как положено. В IE10 / IE11 данные загружаются, когда опция выбирается впервые, пользовательский интерфейс показывает первую. Когда снова выбирается (другой) вариант, пользовательский интерфейс показывает правильный. Примечание. Когда я нажимаю «Сохранить», переданное значение всегда является правильным, даже если пользовательский интерфейс показывает неправильное значение. Это только визуальная проблема. В консоли ошибок нет.
Еще одно примечание: фрагмент HTML загружается с помощью ng-include. Я также попытался вставить html-код на страницу без использования ng-include, проблема в IE сохраняется.

Есть подсказки?

Вы пробовали использовать <option ng-repeat = "b.id как b.title для b в betriebsaktarten"> </option>? Если я правильно помню, из-за ng-options было много проблем, которых можно было избежать с помощью простого ng-repeat.

Groben 18.06.2018 16:47

... когда я начал использовать angularJS, я прочитал, что следует избегать использования ng-repeat on options из-за привязки.

Emaborsa 18.06.2018 17:14

Чтобы исправить такие проблемы, вам сначала нужно изолировать его - создать простой элемент с одним выбором и таймаутом $ вместо вызова $ http.

Petr Averyanov 18.06.2018 17:18

Я не использую $http

Emaborsa 18.06.2018 17:19

а как насчет ui-select тогда? angular-ui.github.io/ui-select

Groben 19.06.2018 15:33
Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?
Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?
Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...
Разница между Angular и React
Разница между Angular и React
React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...
0
5
35
0

Другие вопросы по теме