Redefining / overriding directives

[Saurabh Nanda]

Hi,

I have defined a common directive (uiAlerts) + service (uiAlertsService) for showing app-level alerts on the screen. It's part of my 'common' module that has a whole toolbox of such common directives, services, & filters that are used all over my app.

In one of my Angular apps, I need to give a drastically different visual treatment to on-screen alerts. Therefore, I need to re-define/override the uiAlerts directive. However, whenever I try to do the following, Angular ends up applying TWO directives to the same DOM element (one from the common module and the other from myModule).

var mod = angular.module('myModule', ['common']);
mod.directive('uiAlerts', ['uiAlertsService', function(alerts) {
 // Custom directive code here....
}]);

What is the correct way to achieve this?

Saurabh.

[Peter Bacon Darwin]

Directives do not override each other.  You can have multiple directives with the same names and they will all get applied to matching elements or attributes, etc.

How about you provide a template for the uiAlerts directive and just change that in your different app?

The only other alternative is to place this directive in its own module and then override the module itself with a new one.

Saurabh.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Saurabh Nanda]

How does one override a module, exactly?

Btw, is this worthy of a feature request? A switch which controls whether the directive needs to be merged, or should override other directives with the same name?

module.directive('myDirective', function() {
  return {
    'override' : true,
    // other code here
  }
});

Saurabh.