ionic app + Angular ng-switch-when Не работает

У меня есть полностью работающее приложение Ionic, в которое я добавил угловые переключатели для управления определенными div в представлении.

Проблема возникает на панели ion-footer-bar. Всегда по умолчанию используется facebook (индекс 0) и просто полностью игнорируется instagram ng-switch-when. В разработчике Chrome я ясно вижу, как работает ng-switch, но ошибочное поведение сохраняется, что бы я ни делал.

Я пробовал всевозможные изменения безрезультатно, я начинаю думать, что это связано с тем, как Ionic создает его ion-content и ion-footer-bar элементы (?)

HTML

<ion-content>
    <select ng-model="selectedNetwork" ng-change="setSelected(selectedNetwork.id)" data-ng-options="availableNetwork as availableNetwork.label for availableNetwork in availableNetworksForSelect track by availableNetwork.id">
    </select>

    //*******Please note that These two divs work perfectly*********
    <div ng-switch = "selectedNetwork.id" class="">
        <div ng-switch-when = "facebook" class="" >
            <span>I am Facebook</span>
        </div>
        <div ng-switch-when = "instagram" class="">
            <span>I am instagram</span>
        </div>
    </div>

</ion-content>
<ion-footer-bar ng-switch = "selectedNetwork.id">
    <div ng-switch-when = "facebook" class="" >
        <span>I am Facebook</span>
    </div>
    <div ng-switch-when = "instagram" class="">
        <span>I am instagram</span>
    </div>
</ion-footer-bar>

Это контроллер

$scope.availableNetworksForSelect = [{
                                id: 'facebook',
                                label: 'This is Facebook'
                            }, {
                                id: 'instagram',
                                label: 'This is instagram'
                            }];

$scope.selectedNetwork = $scope.availableNetworksForSelect[0];

РЕДАКТИРОВАТЬ: по запросу, вот setSelected();

$scope.setSelected = function (network) {
    console.log('setSelected', network)
    $scope.selectedTab = network;
    $scope.translationData = {
        network: network.charAt(0).toUpperCase() + network.substring(1)
    };
    var currentTabNetworkTerms;
    if (!_.isUndefined($scope.baba.networks)) {
        currentTabNetworkTerms = _.find($scope.baba.networks, {code: network}).actions;
        $scope.currentTabNetworkActions = _.sortBy(currentTabNetworkTerms, function (term) {
            if (term.name == "post") {
                return 0;
            }
            return 1;
        });
    }
}

ionic-framework angularjs angular-ngmodel ng-switch angularjs-ng-change
person DudeOfLayers    schedule 07.03.2017    source источник
comment
Ваш контроллер, вероятно, привязан к директиве ion-content, поэтому ion-footer-bar выходит за рамки ее области   -  person devqon    schedule 07.03.2017
comment
@devqon - что лучше всего исправить?   -  person DudeOfLayers    schedule 07.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

не используйте ng-switch, поскольку атрибут ion-footer-bar обновленного кода

<ion-footer-bar> 
    <ng-switch on="selectedNetwork.id">
        <div ng-switch-when = "facebook" class="" >
            <span>I am Facebook</span>
        </div>
        <div ng-switch-when = "instagram" class="">
            <span>I am instagram</span>
        </div>
    </ng-switch>
</ion-footer-bar>
person Gaurav    schedule 07.03.2017
comment
В добавлении нет необходимости, так как я добавил его и получил те же результаты, переключатель <ion-content> работает, тогда как переключатель в <ion-footer-bar> не работает, как и перед добавлением - person DudeOfLayers; 07.03.2017
comment
Я уже добавил код для ion-footer-bar, пожалуйста, проверьте - @DudeOfLayers - person Gaurav; 07.03.2017
comment
-какой код вы добавили? Я не слежу за вашим последним комментарием, пожалуйста, объясните. - person DudeOfLayers; 07.03.2017
comment
Я переехал ng-switch из ion-footer-bar в его дочерний дом - person Gaurav; 07.03.2017
comment
<ng-switch on="selectedNetwork.id"> ‹= это можно так написать? Я полагаю, это должен быть атрибут div - person DudeOfLayers; 07.03.2017
comment
конечно, вы можете использовать ng-switch как элемент - person Gaurav; 07.03.2017
comment
Я сделал это, и нет, он по-прежнему показывает мой выбор по умолчанию (instagram) и не переключается на FB, в то время как верхний ng-switch (ion-content) работает отлично. - person DudeOfLayers; 07.03.2017
comment
также опубликуйте свою setSelected функцию - person Gaurav; 07.03.2017
comment
Я добавил setSelected(); к вопросу. - person DudeOfLayers; 07.03.2017
comment
Не думаю, что setSelected(); имеет к этому какое-то отношение, но я был бы счастлив, если бы меня научили чему-то новому. - person DudeOfLayers; 07.03.2017
comment
Если бы был способ просто перенести мой выбор варианта выбора в div io-footer, это могло бы стать быстрым выходом, можете ли вы добавить к своему ответу такой подход? \ - person DudeOfLayers; 07.03.2017
comment
Позвольте нам продолжить это обсуждение в чате. - person DudeOfLayers; 07.03.2017