angularjsのスコープscopeの説明

この記事ではangularjs学習におけるスコープの詳細な説明を中心に紹介しますので、参考にしてください。

はじめに

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

Scope は、使用可能なメソッドとプロパティを備えたアプリケーション データ モデルを格納するオブジェクトです。

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

スコープは、コントローラーとWebアプリケーションのビューの間の接着剤です:

コントローラー-->スコープ-->ビュー(DOM)

ディレクティブ-->ビュー(DOM) AngularJS でコントローラーを作成するとき、$scope オブジェクトをパラメーターとして渡すことができます:

<p ng-controller="myCtrl">
<h1>{{name}}</h1>
</p>

<script>
var app = angular.module(&#39;test&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "天下行走";
});
</script>

出力結果: 世界を歩く

ビューに対応する属性名 "name" をコントローラー内に作成します。 {{ }}。

$scope オブジェクトをコントローラーに追加すると、ビュー (HTML) でこれらのプロパティを取得できます。

ビューでは、$scope プレフィックスを追加する必要はありません。追加する必要があるのは、{{name}} などの属性名のみです。

AngularJS アプリケーションは以下で構成されます:

View (ビュー)、これは HTML です。

Model (モデル)、現在のビューで利用可能なデータ。

Controller（コントローラー）はJavaScriptの関数であり、プロパティを追加・変更することができます。

スコープは、ビューとコントローラーで使用できるプロパティとメソッドを備えた JavaScript オブジェクトです。

別の例を見てみましょう:

<p ng-app="myApp" ng-controller="myCtrl">
  输入你的名字：
  <input ng-model="name">
  <h1>{{greeting}}</h1>
  <button ng-click=&#39;sayHello()&#39;>greet</button>  
</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "张三";
  $scope.sayHello = function() {
    $scope.greeting = $scope.name + &#39;是个笨蛋!&#39;;
  };
});
</script>

この例では、

1. Controller: MyCtrl、これは $scope を参照し、2 つのプロパティとメソッドを登録します

2. $scope オブジェクト: データ モデルを保持します。上記の例に必要な、name 属性、greeting 属性 (注: これは、sayHello() メソッドが呼び出されたときに登録されます)、sayHello() メソッドが含まれます

3. View: 入力ボックス、ボタン、コンテンツがありますデータを表示するために双方向バインディングを使用するブロック

コントローラーの開始の観点から、例全体には次の 2 つのプロセスがあります:

1. コントローラーはスコープに属性を書き込みます:

名前に値を割り当てます。 input は ng-model を介して双方向バインディングを実現するため、名前の変更を認識し、変更された値を にレンダリングできます。 view

2. コントローラーはスコープにメソッドを書き込み、スコープ内のsayHello() メソッドに値を割り当てます。これは、ボタンが ng-click を通じてこのメソッドにバインドされているためです。ユーザーがボタンをクリックすると、sayHello() が呼び出され、このメソッドはスコープ内の name 属性を読み取り、サフィックス文字列を追加し、それをスコープ内の新しく作成された挨拶属性に割り当てます

全体を見るとビューの観点から見たプロセスの例は、主に次の 3 つの部分です:

1. 入力でのレンダリング ロジック: ng-model を介したビュー内のスコープとフォーム要素の双方向バインディングを示します

ng-model の名前に従って、スコープから取得されます。すでに値がある場合は、このデフォルト値を使用して現在の入力ボックスに入力します

1. ユーザー入力を受け入れ、ユーザーが入力した文字列を渡しますこのとき、スコープ内の属性値はユーザー入力値

2. 2 にリアルタイムで更新されます。ボタン

内のロジックは、ユーザーのクリックを受け入れ、スコープ

内のsayHello() メソッドを呼び出します。

3. {{greeting}} のレンダリング ロジック

初期段階: ユーザーがクリックする前 ボタンをクリックしてもコンテンツは表示されません

1. 価値段階: ユーザーがクリックした後、この式が取得されますこの例では、スコープとコントローラーは同じです。この時点では、このスコープの下にあるグリーティング属性がすでに存在しており、この属性はこの時点で取得されます。グリーティング式を計算します。現在のスコープを表示し、Zhang San が馬鹿であることを示すビューをレンダリングします。

2. 上記の 2 つの観点からサンプル プロセスを分析すると、次のことがわかります。 スコープ オブジェクトとそのプロパティは、ビュー レンダリングの唯一のデータ ソースです。
3. 上記は私があなたのためにまとめたものです。
   関連記事:

gulp-uglify圧縮使用後のangularjs実行エラーの解決策

フォームとビジュアル構成の動的レンダリングを実装するVue+ElementUI

webpackパッケージ化後のファイルサイズについての簡単な説明は、大きすぎる解決策

iview をパッケージ化する際の UglifyJs エラーを実際に解決します (詳細なチュートリアル)

vue を使用してプロジェクトをパッケージ化した後に 404 を更新する問題 (詳細なチュートリアル)

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