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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            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指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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指令

1
2
3
4
5
6
7
8
9
10
11
.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”

1
2
3
4
5
6
7
8
<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属性

1
2
3
4
5
<ion-view title="比赛视频" hide-tabs>
    <ion-content>
        <game-detail liveid="liveid"></game-detail>
    </ion-content>
</ion-view>