angular JS 基于ionic框架 开发移动端项目 实现进入前台 判断用户权限 控制项目UI布局和tab的部门显示和隐藏

angularjs基于ionic框架开发移动端项目，怎么实现进去前台之前判断用户权限？
首先参考https://my.oschina.net/blogsh...这篇博客，再结合个人开发项目进行修改
具体想要实现 app的tab的5个部分根据权限控制显示4个，还是5个部分，第一反应是在要权限控制的tab上加上ng-if的条件判断，但是效果并不理想，判断没问题，主要是视图的渲染比逻辑要快，因此，并不理想。具体如下步骤：
1.在先自定义全局的用户权限model

services.js里面
/*自定义获取权限的model 并定义set和get方法*/
.factory('permissions', function ($rootScope) {
var permissionList;
return {
setPermissions: function (permissions) {
permissionList = permissions;
$rootScope.$broadcast('permissionsChanged')
},
hasPermission: function () {
return permissionList;
}
}
});

2 在Angular运行之前获取到permission的映射关系

Angular项目通过ng-app启动,但是一些情况下我们是希望Angular项目的启动在我们的控制之中.比如现在这种情况下,我就希望能获取到当前登录用户的所有permission映射关系后,再启动Angular的App.幸运的是Angular本身提供了这种方式,也就是angular.bootstrap().

app.js
var systecApp = angular.module('myApp', ['ionic', 'myApp.services']);

var permissionList;
/*获取用户权限数据*/
angular.element(document).ready(function() {
$.post('/api/user/queryUserPhonePri', function(data) {
permissionList = data.data;
angular.bootstrap(document, ['myApp']);
});
});
systecApp.run(function($ionicPlatform,$rootScope,$location,$timeout,$ionicHistory,$cordovaToast,permissions) {
if(typeof (permissionList) == 'object'){
permissions.setPermissions(permissionList);//这里就是给用户权限model permissions调用set方法赋值，方便以后使用
}
....});

以上代码中

$.post('/api/user/queryUserPhonePri', 

进行网络请求获取用户权限，这里用$.get不行,这取决于后台请求是否允许时get请求。还需注意的是，这是是jQuery而不是Angular的$resource或者$http,因为在这个时候Angular还没有启动,它的function我们还无法使用.
3.编写属性指令

app.js里面

/*自定义--判断用户是否有权限的属性指令*/
systecApp.directive('hasPermission', function(permissions) {
return {
link: function(scope, element, attrs) {
function toggleVisibilityBasedOnPermission() {
var hasPermission = permissions.hasPermission();//这里是model的get方法获取用户权限信息
if(typeof (hasPermission) == 'object'){
var str = hasPermission.phoneConfPri +"";
scope.$watch(attrs.hasPermission,function(value){
//这里通过监听 凡是使用了该自定义指令的地方，都会把传进来的值value,进行下面的判断，控制使用该指令的标签element是否显示在UI页面上
// console.log(hasPermission.phoneConfPri,value);
if(str == value ){
// console.log("显示");
element.show();
}else {
// console.log("不显示");
element.hide();
}
});
}
}
toggleVisibilityBasedOnPermission();
scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
}
};
});

4.使用

tabs.html上面写两套代码控制，如果只写一套，效果不出来。
<!--有电话会议的权限-->
<ion-tabs  class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide':$root.hideTabs}" hide-tabs="show" has-permission="0" >

<!-- home Tab -->
<ion-tab  title="会议" icon-off="iconfont ion-meet" icon-on="iconfont ion-meet" href="#/tab/home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>

<!-- reserve Tab -->
<ion-tab title="预约" icon-off="iconfont icon-reserve" icon-on="iconfont icon-reserve" href="#/tab/reserve">
<ion-nav-view name="reserve"></ion-nav-view>
</ion-tab>

<!-- template Tab -->
<ion-tab title="一键开会" icon-off="iconfont icon-template" icon-on="iconfont icon-template" href="#/tab/template" style="">
<ion-nav-view name="template"></ion-nav-view>
</ion-tab>

<!--phoneMeeting tab-->
<ion-tab  title="电话会议" icon-off="iconfont icon-phone" icon-on="iconfont icon-phone" href="#/tab/phone">
<ion-nav-view has-permission="1" name="phone"></ion-nav-view>
</ion-tab>

<!-- user Tab -->
<ion-tab title="我的" icon-off="iconfont icon-user" icon-on="iconfont icon-user" href="#/tab/user">
<ion-nav-view name="user"></ion-nav-view>
</ion-tab>
</ion-tabs>

<!--没有电话会议的权限-->
<ion-tabs  class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide':$root.hideTabs}" hide-tabs="show" has-permission="1" >

<!-- home Tab -->
<ion-tab  title="会议" icon-off="iconfont ion-meet" icon-on="iconfont ion-meet" href="#/tab/home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>

<!-- reserve Tab -->
<ion-tab title="预约" icon-off="iconfont icon-reserve" icon-on="iconfont icon-reserve" href="#/tab/reserve">
<ion-nav-view name="reserve"></ion-nav-view>
</ion-tab>

<!-- template Tab -->
<ion-tab title="一键开会" icon-off="iconfont icon-template" icon-on="iconfont icon-template" href="#/tab/template" style="">
<ion-nav-view name="template"></ion-nav-view>
</ion-tab>

<!-- user Tab -->
<ion-tab title="我的" icon-off="iconfont icon-user" icon-on="iconfont icon-user" href="#/tab/user">
<ion-nav-view name="user"></ion-nav-view>
</ion-tab>
</ion-tabs>