【发布时间】:2017-03-07 11:30:21
【问题描述】:
我有一个功能齐全的 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;
});
}
}
【问题讨论】:
-
您的控制器可能绑定到
ion-content指令,因此ion-footer-bar超出其范围 -
@devqon - 解决此问题的最佳做法是什么?
标签: angularjs ionic-framework angular-ngmodel angularjs-ng-change ng-switch