explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Permissions-Based UXs in Angular Using Directives

Leave a comment

the problem

A UI may want to present some content in a read-only state, only allowing the user to interact with said content if they are permitted to do so.  I won’t argue the merits/demerits of this particular UX, only how to solve this requirement.

the solution

.directive( 'permissions', [
     '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( ... )
                             })
                        }
                   }
              }
          }
     }
])

You can see the original question/answer here – http://stackoverflow.com/a/38439845/1121919

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s