指令名和属性名争食 [英] Directive name and attribute name clashing

问题描述

我遇到一个问题与冲突指令和属性名。这是我的问题的一个简化的版本：有两个指令，其中第一指令的名称是第二指令的属性名：

I encountered a problem with clashing directive and attribute names. This is a simplified version of my problem: there are two directives, where the name of the first directive is an 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>'
    }
});

当我尝试我的第二个指令添加到一个html文件：

When I try to add my second directive to an 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 wouldn't be a problem if both directives were in my modules, since renaming them would be easy. But I have clashing directive/attribute names from different external modules that I use in my application.

如何分辨角，该属性属性并不意味着在这种特殊情况下指令？

How can I tell angular, that the attribute property is not meant to be a directive in this particular case?

推荐答案

只是延长我的评论回答，而不是在途中我能想到的重命名指令是创建相同指令的副本并​​失去现有之一。这样，你可能对的命名不佳的指示正确的命名约定，你是从另一个模块消耗。在这里，你需要

Just extending my comment to answer, Instead of renaming the directive on way i could think of is to create a copy of the same directive and invalidate the existing one. That way you could have a proper naming conventions for poorly named directives that you are consuming from another module. Here you need

• $ compileProvider

• 要注册一个新的指令，覆盖角度指令构造 app.directive 。

• To register a new directive, overriding the angular directive constructor app.directive.

$提供服务

• 要装点可怜的名字指令，得到它的定义，并返回只是一个空白无任何操作的工厂。


• 您可以用装饰指令关键字指令加上后缀。他们还注册为一家工厂。

• To decorate the directive with poor name, get its definition and return back just a blank no operation factory.
• You can decorate a directive postFixing with Directive keyword. They are also registered as a factory.

您需要确保这种配置下，有针对性的指令后登记显得格外装修的部分。

You need to make sure this configuration, especially the decoration part appears after the targeted directives are registered.

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's definition
        app.directive('cmProperty', $delegate);
        //return a no operation factory as directive constructor, to make it inactive
        return function() { return angular.noop };
    }]);
}]);

演示

Demo

您可以通过将目标指令的名字在一个恒定的运行装饰的循环自动执行此自动preFIX /重命名（使用其他名称重新创建）吧。

You could automate this by placing the target directive names in a constant and running a loop of decorators to automatically prefix/rename(recreate with another name) it.

更新

看到一个在我的仓库通用的解决方案

这篇关于指令名和属性名争食的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！