【问题标题】:ionic app + Angular ng-switch-when Not working离子应用程序 + Angular ng-switch-when 不工作
【发布时间】:2017-03-07 11:30:21
【问题描述】:

我有一个功能齐全的 Ionic 应用程序,我在其中添加了角度开关来操作视图中的某些 div。

问题出现在 ion-footer-bar 上。它始终默认为 facebook(索引 0)并且完全忽略了 instagram ng-switch-when。 在 chrome 开发人员中,我可以清楚地看到 ng-switch 正在运行,但无论我做什么,错误行为都会持续存在。

我尝试了所有不同类型的更改均无济于事,我开始认为这与 Ionic 如何构建它的 ion-contention-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;
        });
    }
}

【问题讨论】:

  • 您的控制器可能绑定到 ion-content 指令,因此 ion-footer-bar 超出其范围
  • @devqon - 解决此问题的最佳做法是什么?

标签: angularjs ionic-framework angular-ngmodel angularjs-ng-change ng-switch


【解决方案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>

【讨论】:

  • “on”添加不是必需的,因为我已经添加它并且得到相同的结果,&lt;ion-content&gt; 开关有效,而 &lt;ion-footer-bar&gt; 的开关不起作用,只是就像在添加“on”之前一样
  • 我已经添加了ion-footer-bar的代码,请检查-@DudeOfLayers
  • -你添加了什么代码?我不关注你的最后评论,请解释一下。
  • 我已将 ng-switchion-footer-bar 移至其子 dom
  • &lt;ng-switch on="selectedNetwork.id"&gt;
猜你喜欢
  • 2017-05-09
  • 2017-02-23
  • 1970-01-01
  • 2014-06-23
  • 1970-01-01
  • 2016-04-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多