アングラーの役割ドメインscopeの具体的な使用

3774 ワード

アングラースコープ

Scope（スコープ）はHTML（ビュー）とJavaScript（コントローラ）の間に適用される紐です。
Scopeはオブジェクトで、利用可能な方法と属性があります。
Scropeは、ビューとコントローラに適用できます。
$root Scope
各AnglarJsアプリケーションはデフォルトでは一つの作用領域があります。ルートスコープは一番上の位置にあります。他の作用領域の親作用領域として、全体の応用に役立ちます。
$scope
scope（スコープ）はMVCモードのModelに対応しており、HTML（ビュー）とJavaScript（コントローラ）との間の紐付けであり、ビューとコントローラに適用できます。
scopeは、表現が実行されるコンテキストであり、スコープもオブジェクトであり、利用可能な方法と属性があります。
一、変数の値と割り当て


<div ng-controller="parentCtrl">
 <span>{{number}}</span>
 <div ng-controller="childCtrl">
  <span>{{number}}</span>
  <button ng-click="number = number +1">  </button>
 </div>
</div>

function parentCtrl($scope){
 $scope.number = 1;
}
function childCtrl($scope){ 
}

効果:
画面には2つの1つが表示されますが、ボタンをクリックした後、child Ctrlのスコープ内のデータが変更されました。parentCtrlのスコープ内のデータは変わりませんでした。
分析:
①childCtrlスコープはparentCtrlスコープの役割領域（JavaScriptのプロトタイプチェーンの継承に類似）を継承していますので、child CtrlスコープスコープはparentCtrlの内容にアクセスできます。
②ボタンをクリックすると、childCtrlスコープはnumberベース型変数を作成します。childCtrlにある基礎型変数があると、プロトタイプ変数にはアクセスしません。
解決:
①上位作用域の変更は$parentで指定できます。

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

②参照型変数を使用して、内外の範囲はすべてdataオブジェクトの参照であり、オブジェクトの属性を変更し、参照するものと同じ変数である。


 <div ng-controller="parentCtrl">
  <span>{{data.number}}</span>
  <div ng-controller="childCtrl">
   <span>{{data.number}}</span>
   <button ng-click="data.number = data.number +1">  </button>
  </div>
 </div>
 
 function parentCtrl($scope){
  $scope.data.number = 123';
 }
 function childCtrl($scope){
  
 }

ng-inf、ng-repeat、ng-switch、ng-inncludeなどの命令も新たな作用領域を生み出します。
二、Directiveにおける作用域


.directive("myDirective", function () {
return {
 restrict: "AE",
 scope: {
  name: '@myName',
  age: '=',
  changeAge: '&changeMyAge'
 },
 replace: true,
 template: "<div class='my-directive'>" +
  "     ：<span ng-bind='name'></span><br/>" +
  "     ：<span ng-bind='age'></span><br/>" +
  "       ：<input type='text' ng-model='name'><br/>" +
  "<button ng-click='changeAge()'>    </button>" +
  " </div>"
}

①scope:false
scopeがfalseに設定されている場合、私たちが作成した命令は親の役割領域と同じmodelモデルを共有するので、命令でモデルデータを修正し、親の役割領域のモデルに反映します。
②scope:true
scopeがtrueに設定された時、私達は新しいスコープを作りました。このスコープは父の役割領域です。このように理解できるように、私たちが新しく作成したスコープは新しいスコープであり、初期化の際には、親の役割領域の属性と方法を用いて、私たちのこの新しいスコープを塗りつぶすだけである。それは親の役割領域と同じスコープではない。
③scope:{}
@これは単一の結合プレフィックス識別子です。

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

属性の名前は-2つの単語を接続します。データの1つの項目が結合されているので、{}を使ってデータをバインドします。
=これは双方向データバインディングプレフィックス識別子です。

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

データの双方向バインディングは、=プレフィックス識別子によって実現されるため、{}を使用してはいけません。
&これは結合関数方法のプレフィックス識別子です。

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

属性の名前は-複数の単語を接続します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

phpは四捨五入の方法を実現します。

PHPはZIP圧縮、解凍類ZipArchivのマニュアルを持参しています。