如何在AngularJS中使用自己的作用域*从自定义指令*中访问父作用域?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (6)
  • 关注 (0)
  • 查看 (298)

我正在寻找在指令中访问“parent”范围的任何方式。任何范围的组合,转换,要求,从上面传入变量(或范围本身)等等。我完全愿意向后弯曲,但我想避免一些完全不牢靠或无法维护的东西。例如,我知道我现在可以通过$scope从预链接参数中迭代它的$sibling用于查找概念“parent”的范围。

我真正想要的是$watch父作用域中的表达式。如果我能做到的话,我就能完成我在这里想要做的事情:AngularJS--如何用变量呈现一个部分?

代码示例值:

app.directive('watchingMyParentScope', function() {
    return {
        require: /* ? */,
        scope: /* ? */,
        transclude: /* ? */,
        controller: /* ? */,
        compile: function(el,attr,trans) {
            // Can I get the $parent from the transclusion function somehow?
            return {
                pre: function($s, $e, $a, parentControl) {
                    // Can I get the $parent from the parent controller?
                    // By setting this.$scope = $scope from within that controller?

                    // Can I get the $parent from the current $scope?

                    // Can I pass the $parent scope in as an attribute and define
                    // it as part of this directive's scope definition?

                    // What don't I understand about how directives work and
                    // how their scope is related to their parent?
                },
                post: function($s, $e, $a, parentControl) {
                    // Has my situation improved by the time the postLink is called?
                }
            }
        }
    };
});
提问于
用户回答回答于

AngularJS中的范围原型/原型继承有哪些细微差别?

总结:指令访问其父程序的方式($parent)作用域取决于指令创建的作用域的类型:

  1. 缺省(scope: false)-该指令没有创建新的作用域,因此这里没有继承。指令的作用域与父/容器的作用域相同。在链接函数中,使用第一个参数(通常是scope)。
  2. scope: true-该指令创建一个新的子作用域,该子作用域通常从父作用域继承。在父作用域中定义的属性可用于指令。scope(因为原型继承)。只需小心写入原始范围属性--这将在指令作用域上创建一个新属性(该属性隐藏/隐藏同名的父范围属性)。
  3. scope: { ... }-该指令创建一个新的隔离/隔离范围。它不典型地继承父作用域。仍然可以使用$parent,但通常不推荐这样做。相反,应该通过使用指令所在元素的附加属性(和/或函数)指定指令所需的父作用域属性(和/或函数)。=,,,@,和&符号。
  4. transclude: true-该指令创建了一个新的“排除”子作用域,该子作用域通常是从父作用域继承的。如果指令还创建了一个隔离作用域,则已排除的和隔离的作用域是兄弟关系。大$parent属性引用相同的父作用域。

Angular V1.3更新*如果指令还创建了隔离作用域,则已排除的作用域现在是隔离作用域的子域。被排除和隔离的范围不再是兄弟姐妹。大$parent属性现在引用隔离作用域。

上面的链接有所有4种类型的例子和图片。

不能访问指令的编译函数中的作用域(如此处所述):https://github.com/angular/angular.js/wiki/Understanding-Directives

观看:

对于上面的1和2:通常通过一个属性指定指令需要哪个父属性,然后$watch:

<div my-dir attr1="prop1"></div>
scope.$watch(attrs.attr1, function() { ... });

如果你正在监视一个对象属性,则需要使用$parse:

<div my-dir attr2="obj.prop2"></div>

var model = $parse(attrs.attr2);
scope.$watch(model, function() { ... });

对于上面的3.(隔离作用域),使用@=符号:

<div my-dir attr3="{{prop3}}" attr4="obj.prop4"></div>
scope: {
  localName3: '@attr3',
  attr4:      '='  // here, using the same name as the attribute
},
link: function(scope, element, attrs) {
   scope.$watch('localName3', function() { ... });
   scope.$watch('attr4',      function() { ... });

热门问答

腾讯云广州一区DNS变更,需要怎么操作?

思潮澎湃轻描淡写的生活,但思潮澎湃
推荐
我也收到相关的通知了,这里分享下~ 2019年1月31日,腾讯云将对广州地区旧的基础网络DNS服务器(10.225.30.181、10.225.30.223)进行下线。在此期间,腾讯云提供最新的DNS服务器供您更新使用。 我们建议您尽快将DNS服务器配置进行更新,并且我们为您提供...... 展开详请

CMQ创建队列成功,紧接着发送消息,报队列不存在?

CreateQueue成功后,创建队列的时间为1s,您可以等待下在sendMessage

云呼叫中心只能用户自己开发吗?

腾讯云通信团队

腾讯 · 腾讯云通信团队 (已认证)

腾讯高级产品经理
推荐

目前呼叫中心只有API文档,需要用户自己开发。如果用户需要saas系统的呼叫中心可以使用智能外呼机器人:https://cloud.tencent.com/product/ccsr

ios端推流setRenderRotation无效?

西风

renzha.net · 站长 (已认证)

www.renzha.net
推荐

你有没有调整观众端表现,即通过对 LivePushConfig 中的homeOrientation设置项进行配置,它控制的是观众端看到的视频宽高比是16:9还是6:19,调整后的结果可以用播放器查看以确认是否符合预期。

腾讯云直播 CNAME 记录添加 的 值是多少???

西风

renzha.net · 站长 (已认证)

www.renzha.net
推荐
第一步:域名备案 控制台进行域名提交管理前,需对域名进行备案,详情请查看 域名备案 和 域名备案和配置常见问题 文档。 第二步:添加域名 在视频直播菜单栏内选择【域名管理】,在域名管理页面可以看到已创建域名、类型、状态、添加时间和操作。 可添加和管理的域名类型有播放域名和推流域...... 展开详请

【建议】【API】使用API创建子网的时候允许指定已有路由表?

推荐

控制台使用的是新的接口,批量创建子网,https://cloud.tencent.com/document/product/215/31960,可以指定路由表。terraform开发的时候是基于api2.0开发的,还没有这个接口,因此暂时无法使用

所属标签

扫码关注云+社区