Question

我對元素有兩個指令。每個人彼此獨立工作。我知道每個元素限制的1個範圍。我不明白爲什麼這違反了它。

指令X（優先級100）接受一個對象並使用它將其他指令添加到該元素並將其自身刪除。

<div x="obj1"></x> 

變成：

<div ng-model="x.value" ... ></div> 

用於指令X的定義是：

scope: { x: '=' }, 
replace: false, 
link: ... 

指令Y（優先99）使一個元件到一個小部件和需要一個NG-模型。

<div y ng-model="scopeStringValue"></div> 

變爲：

<div y ng-model="scopeStringValue"> 
    <input ng-model="scopeStrinValue" /> 
    ... 
</div> 

的指令Y代表的定義是

scope: true, 
replace: true, 
link: ... 

我想要的是一起使用它們，使指令X將提供NG-模型指令Ÿ但我得到同名的錯誤。

<div y x="obj"></div> 

首先應該變成：

<div y ng-model="x.value"></div> 

然後進入：

<div y ng-model="x.value"> 
    <input ng-model="x.value" /> 
    ... 
</div> 

我不明白，爲什麼這些指令無法一起工作。

Answer 1

答案是在指令X上聲明scope: false，並根據父範圍（用於替代新範圍）分配新屬性。

此外，我必須在指令X上設置終端爲真，否則指令Y將得到兩次評估。一旦在指令X中進行手動$編譯，然後在一次之後自行完成。不知道它爲什麼這樣做，但terminal: true阻止它。

replace: false, 
scope: false, 
terminal: true, 

所以：

<div y x="obj"></div> 

第一變爲：

<div y ng-model="obj.value"></div> 

終於進入：

<div y ng-model="obj.value"> 
    <input ng-model="obj.value" /> 
    ... 
</div> 

最初的指令X鏈接功能看起來像

attributes.$set('ng-model', 'x.value'); 
element.removeAttr('x'); 
$compile(el)(scope); 

，現在它看起來像

attributes.$set('ng-model', attrs.fieldSettings + '.value'); 
element.removeAttr('x'); 
$compile(el)(scope); 

取出X屬性是不相關的這個問題，但如果你想知道爲什麼它的存在：那是因爲我們是手工$編譯和本會導致評估X指令的無限循環。