多指令[x，y]要求隔离范围

Question

我对一个元素有2个指令。每个都相互独立。我知道每个元素限制的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将为指令y提供ng-model，但我得到同名错误。

<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上将terminal设置为true，否则指令Y将被评估两次。一旦在指令X中手动$ compile期间，然后一次自己之后。不确定为什么会这样做，但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指令。