Demonstrates how to extend the built in Angular script directive using $provide.decorate

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script data-require="angular-route@1.2.14" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="contextService.js"></script>
    <script src="scriptDecorator.js"></script>
    <script src="contextInfoController.js"></script>
  </head>

  <body ng-app="script-decorator">
    <div class="container">
      <div class="masthead">
        <h3 class="text-muted">Script Directive Decorator           <small>
            <a href="http://www.technofattie.com/2014/03/25/how-to-extend-angular-script-directive.html" target="_blank">back to the blog post</a>
          </small>
        </h3>
        <ul class="nav nav-tabs">
          <li>
            <a href="#/default">Default</a>
          </li>
          <li>
            <a href="#/route1">Route 1</a>
          </li>
          <li>
            <a href="#/route2">Route 2</a>
          </li>
        </ul>
      </div>
      <!-- Jumbotron -->
      <div class="row">
        <div class="col-lg-12" ng-view=""></div>
      </div>
      <!-- Example row of columns -->
      <div class="row" ng-controller="contextInfoController as ctrl">
        <div class="col-lg-12">
          <h2>Parsed Data is Available via             <code>contextService</code>
          </h2>
          <pre>{{ctrl.getContextInfo() | json}}</pre>
          <p>
            <a class="btn btn-primary" href="#" role="button" ng-click="ctrl.clearContextInfo()">Clear Context Data</a>
          </p>
        </div>
      </div>
      <!-- Site footer -->
      <div class="footer">
        <p>by <a href="http://www.technofattie.com">Techno Fattie</a></p>
      </div>
    </div>
  </body>

</html>

/* Styles go here */

(function(){
  var app = angular.module('script-decorator', ['ngRoute']);

  app.config(['$routeProvider', function($routeProvider){
    
    $routeProvider.when('/route1', {
      templateUrl:'route1.html'
    }).when('/route2', {
      templateUrl:'route2.html'
    }).otherwise({
      templateUrl:'default.html'
    });
    
  }]);

}());

(function() {

  var scriptDirectiveDecorator = function($delegate, contextService) {
    var scriptDirective = $delegate[0],
      originalCompile = scriptDirective.compile;

    if (angular.isDefined(scriptDirective)) {

      scriptDirective.compile = function(elem, attr, trans) {
        if (attr.type === 'text/context-info') {
          var contextInfo = JSON.parse(elem[0].text);

          //Custom service that can be injected into
          // the decorator
          contextService.addContextInfo(contextInfo);
        }

        originalCompile(elem, attr, trans);
      };

    }

    return $delegate;
  };

  scriptDirectiveDecorator.$inject = ['$delegate', 'contextService'];


  angular.module('script-decorator')
    .config(['$provide',
      function($provide) {
        $provide.decorator('scriptDirective', scriptDirectiveDecorator);
      }
    ]);

}());

(function() {

  var ContextService = function() {
    this.contextInfo = {};
  };

  ContextService.prototype.clear = function(){
    this.contextInfo = {};
  };

  ContextService.prototype.addContextInfo = function(info) {
    if (angular.isUndefined(info) || angular.isUndefined(info.id)) return;

    this.contextInfo[info.id] = info;
  };

  angular.module('script-decorator')
    .service('contextService', ContextService);

}());

<h1>I'm the default view</h1>
<p>And my embedded script tag contents are:</p>
<pre>
  <code>
&lt;script type=&quot;text/context-info&quot;&gt;
  {
    &quot;name&quot;: &quot;default-view&quot;,
    &quot;id&quot;: 34,
    &quot;tags&quot;: [
      &quot;angular&quot;,
      &quot;javascript&quot;,
      &quot;directives&quot;
    ]
  }
&lt;/script&gt;
  </code>
</pre>
<script type="text/context-info">
  {
    "name": "default-view",
    "id": 34,
    "tags": [
      "angular",
      "javascript",
      "directives"
    ]
  }
</script>

<h1>I'm Route 1</h1>
<p>And my embedded script tag contents are:</p>
<pre>
  <code>
&lt;script type=&quot;text/context-info&quot;&gt;
  {
    &quot;name&quot;: &quot;route-one&quot;,
    &quot;id&quot;: 93,
    &quot;users&quot;: [
      &quot;josh&quot;,
      &quot;bob&quot;,
      &quot;ralph&quot;
    ]
  }
&lt;/script&gt;
  </code>
</pre>
<script type="text/context-info">
  {
    "name": "route-one",
    "id": 93,
    "users": [
      "josh",
      "bob",
      "ralph"
    ]
  }
</script>

<h1>I'm Route 2</h1>
<p>And my embedded script tag contents are:</p>
<pre>
  <code>
&lt;script type=&quot;text/context-info&quot;&gt;
  {
    &quot;name&quot;: &quot;route-two&quot;,
    &quot;id&quot;: 2899,
    &quot;food&quot;: [
      &quot;pancakes&quot;,
      &quot;syrup&quot;
    ]
  }
&lt;/script&gt;
  </code>
</pre>
<script type="text/context-info">
  {
    "name": "route-two",
    "id": 2899,
    "food": [
      "pancakes",
      "syrup"
    ]
  }
</script>

(function(){

var ContextInfoController = function(contextService){
  this.contextService = contextService;
};

ContextInfoController.prototype.getContextInfo = function(){
  return angular.copy(this.contextService.contextInfo);
}

ContextInfoController.prototype.clearContextInfo = function(){
  this.contextService.clear();
};

ContextInfoController.$inject = ['contextService'];

angular.module('script-decorator')
.controller('contextInfoController', ContextInfoController);

}());