栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

总结一下:指令访问其parent(

$parent
)范围的方式取决于该指令创建的范围的类型:

  1. default(

    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() { ... });


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/436353.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号