Extending Angularjs Directive

Extending AngularJs Directive

Probably the simplest way to solve this is to create a directive on your app with the same name as the third party directive. Both directives will run and you can specify their run order using the priority property (higher priority runs first).

The two directives will share scope and you can access and modify the scope of the third party directive via your directive's link method.

Option 2: You can also access a third party directive's scope by simply putting your own arbitrarily named directive on the same element with it (assuming neither directive uses isolate scope). All non-isolate scope directives on an element will share scope.

Further Reading: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

Note: My previous answer was for modifying a third party service, not a directive.

Extending a 3rd party angular directive and changing its template

After a bunch of stackoverflow searching on how to extend AngularJS Directives (preferably in version 1.5.*), this is what worked for me.

Slightly modifying the decorator and $delegate from the above examples to work with Angular 1.5.8:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

<script>
        angular.module('ui-rangeSlider', []).directive('rangeSlider', [function() {
        return {
            restrict: 'A',
            replace: true,
            template: ['<div>base</div>'].join('')
        };
    }]);
    angular.module('myDirective', []).directive('rangeSlider', [function() {
        return {
            restrict: 'A',
            priority: 500,
            template: ['<div>extended</div>'].join('')
        }
    }]);
    angular.module('sample', ['ui-rangeSlider', 'myDirective'])
        .decorator('rangeSliderDirective', ['$delegate', function($delegate){
            console.log($delegate);
          $delegate.shift();
          return $delegate;
        }]);
</script>

<body ng-app="sample">
    <div range-slider></div>
</body>

You can see the above code working here:

https://jsfiddle.net/sjxwLe4k/6/

Extend ng-if or implement similar directive

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="angular.js@1.4.8" 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>

Extending Angularjs Directive