如何更简单在子级页面隐藏Ionic tabs

-------------2017.01.19更新线-----------------

---

实际的环境是文件路径保存的，还好小伙伴发现的这个问题，摸摸哒。

应该以#号后面的字段来判定是否属于子级页面

directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            // alert("执行了啊！！！！！！");
            // var Urls = $el[0].ownerDocument.URL.split('#');
            // var urlLen = Urls.length;
            // var relativeUrl = Urls[urlLen - 1];
            // alert($el[0].ownerDocument.URL.substr($el[0].ownerDocument.URL.lastIndexOf('#')));
            // console.log(relativeUrl.split('/').length);
            //$el[0].ownerDocument.URL.substr($el[0].ownerDocument.URL.lastIndexOf('#'))
            if($el[0].ownerDocument.URL.substr($el[0].ownerDocument.URL.lastIndexOf('#')).split('/').length > 3){
                $rootScope.hideTabs = 'tabs-item-hide';
            } else {
                $rootScope.hideTabs = '';
            }
            $scope.$on('$destroy', function() {
                if($el[0].ownerDocument.URL.substr($el[0].ownerDocument.URL.lastIndexOf('#')).split('/').length > 3){
                    $rootScope.hideTabs = 'tabs-item-hide';
                } else {
                    $rootScope.hideTabs = '';
                }
            });
        }
    };
})

---

-------------2017.01.14更新线------------------

---

只要是子级页面都隐藏tabs指令

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            console.log(String($el["0"].baseURI).split('/').length);
            console.log(String($el["0"].baseURI));
            $rootScope.hideTabs = 'tabs-item-hide';
            $scope.$on('$destroy', function() {
                if(String($el["0"].baseURI).split('/').length - 1 > 5){
                    $rootScope.hideTabs = 'tabs-item-hide';
                } else {
                    $rootScope.hideTabs = '';
                }
            });
        }
    };
});

---

官方有这么一段话

To hide the tabbar but still show the content, add the** tabs-item-hide** class. Also, whenever you are using tabs, remember to add the has-tabs CSS class to your ion-content directive.

可以看到官方推荐使用tabs-item-hide类来影藏tab，同时在一级页面的ion-content中除了加has-header以外还应该加上has-tabs才能完美解决首页显示不全的问题

具体做法如下 添加hideTabs指令

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = 'tabs-item-hide';
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = '';
            });
        }
    };
});

在tabs添加ng-class="$root.hideTabs"

<ion-tabs class=" tabs-icon-top tabs-stable tabs-color-positive" ng-class="$root.hideTabs">
    <ion-tab  title="全部" icon-off="{{::icons[0].off}}" icon-on="{{::icons[0].on}}" href="{{::templateUrls[0].href}}" >
        <ion-nav-view name="starter-home"></ion-nav-view>
    </ion-tab>
    .............
</ion-tabs>

在子页面添加hide-tabs属性

<ion-view title="比赛视频" hide-tabs>
    <ion-content>
        <game-detail liveid="liveid"></game-detail>
    </ion-content>
</ion-view>

转载于:https://my.oschina.net/cfm880/blog/822565