Angularスコープでスコープを使用する方法

この記事では主に Angular スコープの具体的な使い方を紹介します。編集者がそれを紹介し、参考にしてください。エディターをフォローして見てみましょう

スコープ（スコープ）とは、HTML（ビュー）とJavaScript（コントローラー）の間のリンクです。

スコープは、使用可能なメソッドとプロパティを持つオブジェクトです。

スコープはビューとコントローラーに適用できます。

$rootScope

すべての AngularJs アプリケーションには、デフォルトでルート スコープ $rootScope があり、ルート スコープは最上位に位置し、他のスコープの親スコープとして機能し、アプリケーション全体に適用できます。

$scope

scope (スコープ) は、MVC パターンのモデルに対応し、HTML (ビュー) と JavaScript (コントローラー) の間のリンクであり、ビューとコントローラーに適用できます。

スコープは式が実行されるコンテキストであり、スコープは使用可能なメソッドとプロパティを持つオブジェクトでもあります。

1. 値の取得と変数の代入

<p ng-controller="parentCtrl">
 <span>{{number}}</span>
 <p ng-controller="childCtrl">
  <span>{{number}}</span>
  <button ng-click="number = number +1">增加</button>
 </p>
</p>

function parentCtrl($scope){
 $scope.number = 1;
}
function childCtrl($scope){ 
}

効果:

インターフェイスに 2 つの 1 が表示されますが、ボタンをクリックすると、childCtrl スコープのデータは変更されますが、parentCtrl のデータは変更されます。スコープは変更されません

分析:

①childCtrl スコープはparentCtrl スコープを継承するため (JavaScript のプロトタイプチェーンの継承と同様)、childCtrl スコープはparentCtrl のコンテンツにアクセスできます。
②ボタンをクリックすると、childCtrlスコープにnumberの基本型変数が作成されます。childCtrlがすでに基本型変数を持っている場合、プロトタイプチェーンにはアクセスしません。

解決策:

①$parentを使用して上位スコープの変更を指定できます

 <p ng-controller="parentCtrl">
  <span>{{number}}</span>
  <p ng-controller="childCtrl">
   <span>{{number}}</span>
   <button ng-click="$parent.number = number +1">增加</button>
  </p>
 </p>

②参照型変数を使用します。オブジェクトのプロパティを変更すると、内部スコープと外部スコープはデータオブジェクトへの参照になります。同じ変数は引き続き参照されます。

 <p ng-controller="parentCtrl">
  <span>{{data.number}}</span>
  <p ng-controller="childCtrl">
   <span>{{data.number}}</span>
   <button ng-click="data.number = data.number +1">增加</button>
  </p>
 </p>
 
 function parentCtrl($scope){
  $scope.data.number = 123&#39;;
 }
 function childCtrl($scope){
  
 }

ng-if、ng-repeat、ng-switch、ng-includeなどの命令でも新しいスコープが生成されます

2. ディレクティブのスコープ

.directive("myDirective", function () {
return {
 restrict: "AE",
 scope: {
  name: '@myName',
  age: '=',
  changeAge: '&changeMyAge'
 },
 replace: true,
 template: "<p class=&#39;my-directive&#39;>" +
  "我的名字是：<span ng-bind=&#39;name&#39;></span><br/>" +
  "我的年龄是：<span ng-bind=&#39;age&#39;></span><br/>" +
  "在这里修改名字：<input type=&#39;text&#39; ng-model=&#39;name&#39;><br/>" +
  "<button ng-click=&#39;changeAge()&#39;>修改年龄</button>" +
  " </p>"
}

①scope: false

scopeがfalseに設定されている場合この時、作成したディレクティブは親スコープと同じモデルmodelを共有していました（実際には同じスコープ）。そのため、ディレクティブ内でモデルデータを変更すると、親スコープのモデルに反映されます。

②scope: true

scope が true に設定されると、新しいスコープが作成されますが、このスコープは継承された親スコープです。新しく作成されたスコープは新しいスコープであることがわかりますが、初期化中にプロパティが親スコープのメソッドは、新しいスコープを満たすために使用されます。親スコープと同じスコープではありません。

③スコープ: {}

@ これは単一バインディングのプレフィックス識別子です

<p my-directive my-name="{{name}}"></p>

属性の名前は、2 つの単語を接続するために使用する必要があります。これはデータの単一バインディングであるため、{{} を使用しますデータをバインドします。

= これは双方向のデータ バインディング プレフィックス識別子です

<p my-directive age="age"></p>

データの双方向バインディングは = プレフィックス識別子を通じて実現する必要があるため、{{}} は使用できません。

& これはバインディング関数メソッドのプレフィックス識別子です

<p my-directive change-my-age="changeAge()"></p>

複数の単語を接続するために、属性の名前には - を使用する必要があります。

上記は私があなたのためにまとめたものです。

関連記事:

reactを使ってメニュー権限制御を実装する方法

vue.jsでpropsがパラメータを渡す方法の詳細な解釈

inputで動的ファジークエリを実装する方法

以上がAngularスコープでスコープを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。