CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
herman
herman

Reputation: 12305

Extend ng-if or implement similar directive

I would like to include or exclude content based on a boolean value. The boolean value comes from a service that provides feature toggles. I don't want to inject the directive in a lot of places or use $root in a condition for ng-if.

So I would like to create an AngularJS attribute directive that is similar to ng-if but has the service injected and includes/excludes the content based on the boolean value, instead of getting a condition expression from the attribute value in the template.

Is it possible to somehow extend the existing ng-if directive? If not, what would be the easiest/best way to implement similar behavior?

Upvotes: 1

Views: 1451

Answers (2)

mccainz
mccainz

Reputation: 3497

Here is a simple directive embedding a service which when it executes the linking function will decide whether or not to display the DOM element based on the value returned from the service. The directive relies on the currentUser service to return the value which would normally be part of the ng-if expression. It evaluates this in the linking function so the assumption is that this value is static and does not need to be re-evaluated. In fact, it cannot be re-evaluated as we totally remove the element from the DOM.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <button is-admin>ADMIN BUTTON</button>
    <button>REGULAR BUTTON</button>
    <script>
      
      var app=angular.module("app",[]);
      
      app.service("currentUser",function(){
        
        return {
          isAuthorized : function(){return false;}
        }
        
      });
      
      app.directive("isAdmin",["currentUser", function(currentUser){
        
        var linkFx = function(scope,elem,attrs){
          debugger;
          if(!currentUser.isAuthorized()){
            elem[0].remove();
          }
        }
        
        return {
          link: linkFx,
          restrict: "A"
        }
        
      }]);
      
      angular.bootstrap(document,[app.name]);
      
    </script>
  </body>

</html>

Upvotes: 1

AlexD
AlexD

Reputation: 4300

I would suggest a different approach perhaps, and that is have an object in any parent controller, and use that object to do whatever.

So if your first controller is MainCtrl you can:

$scope.serviceDataWrapper = function() {
    return MyService.getValue();
}

and use the regular ng-if anywhere, even if it involves different controllers:

<div ng-if="serviceDataWrapper()"></div>

Upvotes: 0

Related Questions