指令名稱和屬性名稱衝突

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