序文
Angularjs自身の指示には、現在、 ng-include ng-view 、 ng-switch 、およびng-repeatが含まれています。この理由は、これらの命令はAngularjsによって内部的に定義されているが、 directiveによって実装されたものと同じであるためです。 scope:true 。子の範囲は親の役割を継承し、独立した子供の範囲を構築します。すべての双方向のバインディングは実装できず、子のスコープのみを実装することができます。親のプロパティを継承します。
AngularJS継承は、JavaScriptのプロトタイプ継承を通じて実装されます。プロトタイプの継承とは、親の範囲が子スコープのプロトタイプチェーンにあることを意味します。なぜなら、プロトタイプチェーンの検索は、属性が取得されたときにのみトリガーされ、属性値が変更されたときにトリガーされないためです。そのため、元のタイプをオブジェクトに変換し、値をオブジェクトのプロパティにバインドする必要があります。
この例でわかるように、変更後、子供は親の範囲のプロパティを変更できます。プリミティブタイプは、親クラスの範囲のみを継承できます。
現在、3つの実装方法があり、次にそれらを紹介します
{}を親スコープに追加して、元のタイプをオブジェクトに変換します。
コードは次のとおりです。
<！doctype html> <html lang = "en" ng-app = "childscope"> <head> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </> <style>高さ：50px;背景：SkyBlue; } .inner {border：1px Solid Skyblue;幅：200px;高さ：150px; } .outer {border：1px solid saltmon;幅：200px;高さ：150px; } .sco {background：skyblue; } </style> </head> <body ng-controller = "ChildCon"> <div> <h3>親スコープ</h3> <span> {{vm.private1}} </span> <span> {{vm.private2}}} </span> </div> <h3> src = "'one.html'" "> </div> <div ng-include src =" 'two.html' "> </div> </div> </body> <script> angular.module（" ChideScope "、['Template']）。 vm = $ scope.vm} vm.private2 = 13; var template = angular.module（ "template"、[]）.run（["$ templatecache"、function（$ templatecache）{$ templatecache.put（ "one.html"、 " +" <div> <入力タイプ= 'text' ng-model = 'vm.prat1 （$ templatecache）{$ templatecache.put（ "two.html"、 " +" <div> <input type = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'>構文としてのコントローラーを介した実装
controller as 、実際にはcontrollerのサンプルオブジェクトに相当します。原則は、元のタイプをオブジェクトタイプに変換することです。
<！doctype html> <html lang = "en" ng-app = "childscope"> <head> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </> <style>高さ：50px;背景：SkyBlue; } .inner {border：1px Solid Skyblue;幅：200px;高さ：150px; } .outer {border：1px solid saltmon;幅：200px;高さ：150px; } .sco {background：skyblue; } </style> </head> <body ng-controller = "childcon as vm"> <div> <h3> parent scope </h3> <span> {{vm.private1}} </span> <span> {{vm.private2}}}} </span </div> <h3> <h3> <h3> </h3> </h3> < src = "'one.html'" "> </div> <div ng-include src =" 'two.html' "> </div> </div> </body> <script> angular.module（" ChideScope "、['Template']）.controller（" childcon "、" $ scope（$ scope "、" "" $ scope（$ scope）」 this.private2 = 22; var template = angular.module（ "template"、[]）.run（["$ templatecache"、function（$ templatecache）{$ templatecache.put（ "one.html"、 " +" <div> <入力タイプ= 'text' ng-model = 'vm.prat1 （$ templatecache）{$ templatecache.put（ "two.html"、 " +" <div> <input type = 'text' ng-model = 'vm.private2'/> " +" <div class = 'sco'>$ parent.nameを使用して内部メソッドを呼び出して実装します。
プロトタイピング継承とは、親の範囲がJavaScriptの特徴である子供の範囲のプロトタイプチェーンにあることを意味します。
AngularJSの範囲には、次の内部的に定義された関係もあります。
範囲。$親は、親の範囲の範囲を指します。
範囲。$$チャイルドヘッドは、範囲の最初のサブスコープを指します。
スコープ。$$の養育書は、範囲の最後のサブスコープを指します。
範囲。
スコープ。$$前の隣接する範囲のスコープを予測します。
scope.$parent.name
例は次のとおりです。
<！doctype html> <html lang = "en" ng-app = "childscope"> <head> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "text/javascript"> </> <style>高さ：50px;背景：SkyBlue; } .inner {border：1px Solid Skyblue;幅：200px;高さ：150px; } .outer {border：1px solid saltmon;幅：200px;高さ：150px; } .sco {background：skyblue; } </style> </head> <body ng-controller = "ChildCon"> <div> <h3>親スコープ</h3> <span> {{private1}} </span> <span> {{private2}} </span> </div> <div> <h3>独自src = "'one.html'" "> </div> <div ng-include src =" 'two.html' "> </div> </div> </body> <script> angular.module（" ChideScope "、['Template']）.controller（" childcon "、" $ scope.（$ scope.（$ scope.）。 $ scope.private2 = 22; var template = angular.module（ "template"、[]）.run（["$ templatecache"、function（$ templatecache）{$ templatecache.put（ "one.html"、 " +" <div> <入力タイプ= 'text' ng-model = '$ parent1' function（$ templatecache）{$ templatecache.put（ "two.html"、 " +" <div> <input type = 'text' ng-model = '$ parent.private2'/> " +" <div class = 'sco'> <span>原始タイプ</span> {{{{{test}}}} </div> " +" + " +" + " +" + " +" + " +" + " +" + " +"要約します
上記は、AngularJSの子スコープ問題の内容全体です。みんなの勉強や仕事に役立つことを願っています。ご質問がある場合は、お気軽にお問い合わせください。