指令名称和属性名称冲突

Question

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

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文件：

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

我得到以下错误：

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 

现在，这不会是一个问题，如果这两个指令是在我的模块，因为他们重新命名很容易。但是我在我的应用程序中使用了来自不同外部模块的指令/属性名称。

我该如何判断角度，property这个属性在这个特殊情况下是不是指令？

Answer 1

只是扩展我的评论来回答，而不是重新命名的方式，我可以想到的方式是创建一个相同的指令和无效现有的指令。这样你可以有一个适当的命名约定命名为的指令，你正在使用另一个模块。在这里，你需要

• $compileProvider

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

• $provide service

  • 为了装饰用可怜的名字指令，得到它的定义，并返回只是一个空白无操作的工厂。
  • 您可以用Directive关键字修饰指令后缀。他们也被注册为工厂。

你需要确保这个配置，有针对性的指令登记后显得尤为装饰部。

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

你可以通过放置在一个恒定的目标指令的名称和运行装饰的循环自动前缀/重命名（与另一名重建），它自动执行此。

---

更新

看到一个generic solution in my repository