Question

我有一个完全工作的Ionic应用程序，我在其中添加了角度开关来操纵视图中的某些div。

离子页脚杆上出现问题。它总是默认为facebook（索引0），并且完全忽略了Instagram ng-switch-when。在chrome开发人员中，我可以清楚地看到ng-switch正在运行，但无论我做什么，错误的行为都是持久的。

我尝试过所有不同类型的改变都无济于事，我开始认为它与Ionic如何构建它的离子含量＆amp; amp＆amp; amp;＆amp; amp; ; 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;
        });
    }
}

Answer 1

不要将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>

离子app + Angular ng-switch-when不工作时

1 个答案: