Name and name of directive name

Question

I am having a problem with directive and attribute names. This is a simplified version of my problem: there are two directives where the name of the first directive is the attribute name of the second directive:

angular.module('mymodule').directive('property', function() {
    return {
        template: '<div>Property Directive</div>'
    };
});

angular.module('mymodule').directive('fail', function() {
    return {
        scope: {
            property: '='
        },
        template: '<div>{{property}}</div>'
    }
});

When I try to add my second directive to the html file:

<fail property="'test'"></fail>

I get the following error:

Error: [$compile:multidir] Multiple directives [fail, property] asking for template on: <fail property="'test'">http://errors.angularjs.org/1.3.0-rc.4/$compile/multidir?p0=fail&p1=property&p2=template&p3=%3Cfail%20property%3D%22'test'%22%3E

Now this would not be a problem if both directives were in my modules, since renaming them would be easy. But I come across directive / attribute names from different external modules that I use in my application.

How can I tell angular that an attribute is propertynot a directive in this particular case?

Answer 1

, , , , , . , , .

• $compileProvider

  • , angular app.directive.

• $provide service

  • , factory.
  • postFixing Directive. factory.

, , , .

app.config(['$compileProvider', function ($compileProvider) {
    //Override directive constructor
    app.directive = function (name, dirObject) {
        //Register a directive
        $compileProvider.directive(name, function() {
           return dirObject[0];
        });
    };
}]).config(['$provide', function($provide){
    //Decorate target directive
    $provide.decorator('propertyDirective', ['$delegate', function($delegate){
        //Just register a new directive with source definition
        app.directive('cmProperty', $delegate);
        //return a no operation factory as directive constructor, to make it inactive
        return function() { return angular.noop };
    }]);
}]);

, / ( ).

---

.