title: Overriding angularjs directive at runtime
body: <p>I want to override angularjs directive at runtime in my single page application. Is it possible?
  This is my first page js:</p>
  <pre><code>appGML.directive('singleSelectKeyUp', function ($resource, $compile, $parse, $timeout, $http, $document,$q) {
  return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
          singleSelectKeyUp: '='
      },
      link: function (scope, element, attr, ngModel) {
          return scope.$watch(function () {
  
              return ngModel.$modelValue;
          }, function (name) {
               console.log('first page');
          });
      };
  });
  appGML.controller(&quot;Pay_tra_advertisementController&quot;, function ($sce, $compile, $timeout, $scope, $uibModal, $parse, $http, Upload, $mdBottomSheet, $q) {//
  });
  </code></pre>
  <p>This is my secondpage js:</p>
  <pre><code>appGML.directive('singleSelectKeyUp', function ($resource, $compile, $parse, $timeout, $http, $document,$q) {
  return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attr, ngModel) {
          return scope.$watch(function () {
  
              return ngModel.$modelValue;
          }, function (name) {
               console.log('second page');
          });
      };
  });
  appGML.controller(&quot;Pro_tra_boqController&quot;, function ($q, $compile, $scope, $http, $parse, $uibModal, Upload, $timeout){//
  });
  </code></pre>
  <p>but while routing by ngRoute, I opened two pages one by one, Both directives are in appGML._invokeQueue, and only first directive is executed.</p>
  <pre><code>appGML.config(function ($provide,$routeProvider, $ocLazyLoadProvider, $locationProvider, $controllerProvider, $compileProvider/*, $urlMatcherFactoryProvider, $stateProvider*//*, $urlRouterProvider*/) {
      appGML.controller = $controllerProvider.register;
      appGML.directive = $compileProvider.directive;
      function loadScript(path) {
      var result = $.Deferred(),
          script = document.createElement(&quot;script&quot;);
      script.async = &quot;async&quot;;
      script.type = &quot;text/javascript&quot;;
      script.src = path;
      script.onload = script.onreadystatechange = function (_, isAbort) {
          if (!script.readyState || /loaded|complete/.test(script.readyState)) {
              if (isAbort)
                  result.reject();
              else
                  result.resolve();
          }
      };
      script.onerror = function () { result.reject(); };
      document.querySelector(&quot;head&quot;).appendChild(script);
      return result.promise();
      }
      function loader(arrayName) {
  
      return {
          load: function ($q) {
              var deferred = $q.defer(),
                  map = arrayName.map(function (name) {
                      return loadScript('/JSController' + name + &quot;.js&quot;);
                  });
              $provide.decorator('singleSelectKeyUpDirective', ['$delegate', function ($delegate) {
                  //$delegate is array of all ng-click directive
                  //in this case first one is angular buildin ng-click
                  //so we remove it.
                  console.log('load:sskuL', $delegate);
                  //$delegate.shift();
                  return $delegate;
              }]);
              $q.all(map).then(function (r) {
                  deferred.resolve();
              });
  
              return deferred.promise;
          }
      };
  }
      $routeProvider.when('/PayModule/Pay_tra_advertisement', {
          templateUrl: '/PayModule/Pay_tra_advertisement',
          controller: 'Pay_tra_advertisementController',
          resolve: loader(['/PayModule/Pay_tra_advertisement'])
      })
          .when('/ProModule/Pro_tra_boq', {
          templateUrl: '/ProModule/Pro_tra_boq',
          controller: 'Pro_tra_boqController',
          resolve: loader(['/ProModule/Pro_tra_boq'])
       })
  });
  </code></pre>
  <p>Output is</p>
  <pre><code>first page
  </code></pre>
  <p>Is it feasible to disable first directive and override it with new directive?
  Thanks in advance</p>