简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 关于ng指令隔离作用域的问题
阿神
阿神 2017-04-10 16:17:46
0
1
679
<body ng-app="myApp">
<p ng-controller="MainController">
 Outside myDirective:{{myProperty}}
 <p my-directive ng-init="myProperty='wow,this is coll'">
     Inside myDirective:{{myProperty}}
 </p>
</p>

这是html的文件
下边是js的
1 scope=true

 .directive('myDirective',function () {
            return {
                restrict:'A',
                //scope:{},
                scope:true,
                priority:100,
                template:'<p>Inside myDirective {{myProperty}}</p>'
            };
        });

ff下显示
Outside myDirective:
Inside myDirective wow,this is coll

2 scope {}

.directive('myDirective',function () {
            return {
                restrict:'A',
                scope:{},
                priority:100,
                template:'<p>Inside myDirective {{myProperty}}</p>'
            };
        });

ff 下显示
Outside myDirective:wow,this is coll
Inside myDirective

scope：true； 将会创建一个新的作用域出来，所以本级可以读到myPropery上一级读取不到
scope：{}，为甚么上一级可以读到！本级读取不到呢？

这个实在能晕了！不懂啊！请各位指点！谢谢

阿神
阿神

闭关修行中......

répondre à tous(1)
左手右手慢动作
左手右手慢动作2017-04-10 16:19:46 1 plancher

非常有意思的问题。
我自己测试了一下，源码贴这里

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="myApp">
<p ng-controller="MainController">
 Outside myDirective:{{myProperty}}
 <p my-directive ng-init="myProperty='wow,this is coll'">
     Inside myDirective:{{myProperty}}
 </p>
</p>

<script type="text/javascript">
angular.module("myApp", [])
   .controller("MainController", function(){
     
   })
   .directive('myDirective',function () {
       return {
          restrict:'A',
          //scope: {},
          scope: true,
          priority:1000,
          template:'<p>Inside myDirective {{myProperty}}</p>'
       };
   });
</script>

</body>
</html>

第一, 我们需要搞清楚 scope:true 和 scope:{} 的含义:

  • scope:true 产生一个子作用域 (child scope)

  • scope:{} 产生一个隔离作用域 (isolated scope)

第二, ngInit是干什么的
https://docs.angularjs.org/api/ng/directive/ngInit
在当期作用域下执行一个表达式，指令优先级是450，当然这个问题和优先级无关。
ngInit源码 https://github.com/angular/angular.js/blob/master/src/ng/directive/ngInit.js
注意它没有设置scope

第三，在同一个元素上使用多个指令的时候，作用域该如何计算
参见官方文档
https://docs.angularjs.org/api/ng/service/$compile

  • no scope + no scope => Two directives which don't require their own scope will use their parent's scope

  • child scope + no scope => Both directives will share one single child scope

  • child scope + child scope => Both directives will share one single child scope

  • isolated scope + no scope => The isolated directive will use it's own created isolated scope. The other directive will use its parent's scope

  • isolated scope + child scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.

  • isolated scope + isolated scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.

我们的问题应该符合下面两种情况
isolated scope + no scope: ngInit 使用父作用域(也就是MainController的scope)，myDirective使用自己的隔离作用域
child scope + no scope: ngInit 和 myDirective 共同使用子作用域

另外关于angular指令这块，你可以多看看youtube上的视频，我这里有两篇笔记，希望可以对你有帮助

  • https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/31

  • https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/32

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！