ZH奶酪:Ionic通过angularJS+tabs-item-hide实现自定义隐藏tab

时间:2022-10-29 11:18:11

参考链接:http://*.com/questions/23991852/how-do-i-hide-the-tabs-in-ionic-framework

1.index.html

 <script src="js/directive.js"></script>

2.directive.js

angular.module('ibg.directives', []);

angular.module('ibg.directives').directive('hideTabs', function ($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) { scope.$on('$ionicView.beforeEnter', function() {
$rootScope.hideTabs = true;
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = value;
});
}); scope.$on('$ionicView.beforeLeave', function() {
$rootScope.hideTabs = true;
});
}
};
});

3.tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">
</ion-tabs>

4.不隐藏的tab

<ion-view view-title="IBeautyGuru" ng-controller="HomeCtrl" hide-tabs='false'>
</ion-view>