Scope angularjs转换范围访问
我已经设置了一个带有标题和应用/取消按钮的常规对话框指令。 对话框有一个独立的作用域 dialog指令的内容被转移,因此其作用域是dialog作用域的同级: 从文档中: 然而,隔离作用域产生了一个新问题:如果一个转置的DOM是小部件隔离作用域的子对象,那么它将无法绑定到任何东西。因此,在小部件为其局部变量创建隔离范围之前,被转移的范围是原始范围的子范围。这使得被转移和小部件隔离的作用域成为兄弟 但这给我带来了一个新问题。当应用该对话框时,转置的DOM应该能够响应该对话框。因此,我想在对话框上设置一个“applicated”属性,并让转置的DOM监视它。但这是不可能的,因为他们是兄弟姐妹Scope angularjs转换范围访问,scope,angularjs,transclusion,Scope,Angularjs,Transclusion,我已经设置了一个带有标题和应用/取消按钮的常规对话框指令。 对话框有一个独立的作用域 dialog指令的内容被转移,因此其作用域是dialog作用域的同级: 从文档中: 然而,隔离作用域产生了一个新问题:如果一个转置的DOM是小部件隔离作用域的子对象,那么它将无法绑定到任何东西。因此,在小部件为其局部变量创建隔离范围之前,被转移的范围是原始范围的子范围。这使得被转移和小部件隔离的作用域成为兄弟 但这给我带来了一个新问题。当应用该对话框时,转置的DOM应该能够响应该对话框。因此,我想在对话框上设置
哪里出了问题?我遇到过类似的情况,有两种方法(我知道)可以直接访问转置范围 第一种方法是在编译函数中自己创建作用域,然后将其与克隆链接函数一起传递给transclude链接函数:
function compileFn(tElement, tAttrs, transclude) {
return linkFn;
function linkFn(scope, element, attrs) {
scope = scope.$new();
scope.name = attrs.works1;
transclude(scope, function(clone) {
element.find('div').append(clone);
});
};
}
第二个是创建一个控制器并注入$transclude服务,该服务预先绑定到一个新的作用域。克隆链接函数将接收新作用域作为其第二个参数:
function Controller($element, $attrs, $transclude) {
$transclude(function(clone, scope) {
scope.name = $attrs.works2;
$element.find('div').append(clone);
});
}
在这两种情况下,您都必须提供克隆链接功能来自己进行转换,而不是使用ngTransclude
请参阅这两个示例。好的,我想我已经找到了解决方案。 我已经将实际对话框包装在一个指令中,该指令定义了对话框的作用域。 对话框的内容仍然被转移到对话框中,但由于它将从对话框的
父级(!!)而不是对话框本身(转移以这种方式工作),因此将非常好地工作
此外,我可以使用对话框上的&属性
使sg import指令在应用对话框时作出响应。当应用对话框时,我让它在父作用域的上下文中计算sg apply
函数(作用域自动完成,我只需要从控制器的apply()函数调用该方法)
如果您愿意在公共祖先中创建一个模型,作为具有$watch目标的交换机,您可以使用预先存在的设施使每个指令发生变化和/或监视该交换机模型。组件的访问模式和内容的控制器对于每个作用域都有两个不同的调用签名,并且对于转置的情况有一个轻微的“gotcha”
具有双向绑定的隔离作用域
注册指令的隔离作用域时,=attrName“将导致检查名为“attrName”的domainName属性。Angular将设置双向绑定,以便对任一作用域的模型中的值进行更改也会影响同级作用域中的模型
例子
在controller-parent.js中:
module.controller( 'ParentController', function() {
$scope.switchboard = { };
}
在directive-sg-dialogue.js中
return {
scope: {
isolatedPeer: "=dialogModel"
};
…在指令元数据中
<div ng-controller="ParentController">
<sg-dialog dialog-model="switchboard">
<div ng-controller="ChildController"></div>
</sg-dialog>
</div>
…在绑定到应用程序视图模板的控制器中
那么你们都准备好了
$scope.$watch( 'switchboard.isApplied', function(newValue, oldValue) { })
…在公共祖先中,并在
isolatedPeer.isApplied = true;
…在孤立的范围内
原型遗传
只要您没有在转置子对象中显式设置$scope.swtichboard,您就可以从转置子对象中的角度表达式访问“switchester.isApplied”,并让插值引擎“查找”父控制器在其自己的作用域中分配和存储的值thaat
例如,当配对对话框关闭时,将调用以下回调:
$scope.$watch( 'switchboard.isApplied', function(newValue, oldValue) { } );
这是因为被转移的子对象总是被赋予一个基本作用域,而不是一个孤立的作用域
希望这有帮助!我不确定您想做什么。特别是,我在“应用对话框时,您应该能够响应对话框”中失去了您。如果应用的属性值更改,您希望手表执行什么操作?你能不能把你想做的事情摆弄一下,看看哪个部分不起作用?对我来说,就$scope。$$nextSibling找到了转移的scope。
isolatedPeer.isApplied = true;
$scope.$watch( 'switchboard.isApplied', function(newValue, oldValue) { } );