コントローラーの作成
AngularJSコントローラーはどこでも使用されており、コードのデモンストレーションは比較的簡単に作成できます。
<！doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "execplearpp"> <head> <meta http-equiv = "content-type" content = "text/html; src = "angular.js"> < /script> <link href = "bootstrap-theme.css" rel = "styleSheet" /> <link href = "bootstrap.css" rel = "styleSheet" /> <script> angular.module（ "exampleapp"、[]）。 {$ scope.setInput = function（value）{console.log（ "print：" + value）;}}）; </script> </head> <body ng-controller = "defaultctrl"> <div> <h> count </h> <div> <div> <input nuse ng-model = "value"/> <ボタンng-click = "setInput（value）"> </button> </div> </body> </html>をクリックしますコントロールは非常に単純です。最初に、HTMLにNG-APP属性を追加して、モジュールの範囲を示しました。
defaultctrlコントローラーの範囲を表すために、ng-controllerをボディに追加しました。
入力ノートのNG-Modelコマンドは、バインディングデータ、双方向データバインディング（MVVM）です。
$スコープは、Angularjsの組み込み範囲です。
この例は、図に示すように、コンソールに入力値を印刷するためだけです。
それだけです、それは簡単です。
複数のコントローラースコープの問題
次に、プログラムを変更しましょう。
<body> <div ng-controller = "defaultctrl"> <h> count </h> <div> <入力ng-model = "value"/> <button ng-click = "setInput（value）"> div> </div> <div ng-controller = "defaultctrl"> hiv> hiv> </hiv> </hiv> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> </< ng-click = "setInput（value）"> </button> </div> </body>をクリックします
コードの残りの部分は変更されていません。私は、プロパティNg-Controllerを体に入れて2つのDivに入れました。 DefaultCtrlコントローラーを再利用しました。最初の入力タグにコンテンツを入力し、2番目のコントローラーのボタンボタンをクリックすると、予想される結果が表示されますか？
結果はあなたの考えと同じですか？結果が定義されていないことがわかります。良い説明では、それらの範囲が異なることです。統合コントローラーを再利用しましたが、作成するとスコープは実際に異なります。
呼び出された工場関数は、異なるスコープを返します。
では、異なるスコープ間でどのようにアクセスするのでしょうか？ Angularjsには、スコープアクセス用の$ Rootscopeがあります。
紹介する3つの機能を次に示します。
$ on（名前、ハンドラー）は、現在の範囲で特定のイベントが受信されたときに呼び出されるイベントハンドラー関数を登録します。
$ emit（name、args）は、ルートスコープまで現在の親スコープにイベントを送信します。
$ broadcast（name、args）は、現在のスコープの下でイベントをサブスコープに送信します。パラメーターはイベント名とイベントに追加データを提供するために使用されるオブジェクトです。
次のコードを変更します。
<script> angular.module（ "Examplearpp"、[]）。コントローラー（ "defaultctrl"、function（$ scope、$ rootscope）{$ scope。$ on（ "updatevalue"、function（event、args）{$ scope.input.input = args.zip;}）; value}）; console.log（ "print：" + $ scope.input）;} $ scope.copy = function（）{copy： " + $ scope.input）;} ng-click = "copy（）"> copy </button> </div> </div>セグメントコードでは、いくつかの機能を追加し、2番目のコントローラーの関数を同時に変更しました。
結果：
それは起こりました。
コントローラー継承
<script> angular.module（ "Examplearpp"、[]）。コントローラー（ "defaultctrl"、function（$ scope、$ rootscope）{// $ scope.$on("updatevalue "、function（event、args）{// $ scope.input = args.zip; //}）; {//$rootscope.broadCast（ "updatevalue"、{zip：value}）; $ scope.input = value; console.log（ " + $ scope.input）;} $ scope.copy = function（）{console.log（" copy： " + $ scope.input）; {$ scope.copy = function（）{console.log（ "copy：" + $ scope.input）;};} ng-click = "setInput（value）">クリック</button> </div> <div> <div ng-controller = "simplectrl"> <h> count </h> <div> <入力ng-model = "value"/> <ボタンng-copy（） "> copy </button> </div> </body> </div> </body>コントローラーを追加しましたが、SimplectRLを慎重に観察した後、DefaultCtrlにSimplectRLが含まれていることがわかりました。
結果：最初のウィンドウに入力を投稿したとき、2番目のウィンドウも変更され、同じ値である必要があります。
$スコープスコープの問題、コントローラーを使用する場合、そのスコープを理解する必要があります。