javascript - Angularjs 权限用户类型

Question

我正在构建一个 AngularJS 应用程序。在应用程序的后台，根据用户/帐户的类型(管理员、高级、免费)，用户将拥有不同的权限(2 种类型)。

1. 限制区域(例如:侧边栏)是可见的，但如果用户点击其中一个链接，它将打开一个模式，显示类似“购买高级版”的内容。<
2. 禁区是看不见的。

我正在考虑在元素中应用服务和指令的组合，但我不确定最佳路径，因为我想要一个可以在以后扩展的功能。

我希望有人能够给我一些关于如何实现我的目标的建议。

仪表板布局示例:

Answer 1

我假设您已将用户数据存储在服务或 Controller 中的某个位置。我只需使用 ng-if

即可提高所有可见性

<restricted-content ng-if="vc.user.isPremium">

无需在那里创建额外的指令。

至于侧边栏内容。如果您采用指令路线，我建议您使用具有以下内容的指令执行某些操作:

• 指令优先级高于默认值
• 监听元素上的点击事件:
  • 如果用户的权限 checkout 什么都不做，否则
  • 然后调用 event.preventDefault() 和 event.stopImmediatePropagation()
  • 使用服务启动您的“注册高级”模式

伪代码:

.directive( 'premiumContent', [
     'popupService',
     'sessionService',
     function( popupService, sessionService ){

          return {
              restrict: 'A',
              priority: -1,
              link: function( $scope, elem, attrs ){

                   elem.on( 'click', function( evt ){
                        if ( !sessionService.user.isPremium )
                        {
                             evt.preventDefault()
                             evt.stopImmediatePropagation()

                             $scope.$apply( function(){
                                  popupService.show( ... )
                             })
                        }
                   }
              }
          }
     }
])

实现:

 <sidebar-content-item  ng-click="vc.contentClick()"  premium-content>

这是一个例子(coffeescript + jade)- http://codepen.io/jusopi/pen/qNooZj?editors=1010