AngularJSコントローラーの使い方の詳しい説明_AngularJS-jsチュートリアル-php.cn

AngularJSコントローラーの使い方の詳しい説明_AngularJS

WBOY

リリース： 2016-05-16 15:11:13

オリジナル

1988 人が閲覧しました

Angularjs におけるコントローラーの役割は、ビューを拡張することです。これは、実際にはビュー内のスコープに追加機能を追加するために使用される関数であり、スコープオブジェクトの初期状態を設定し、カスタム動作を追加します。。

ページ上にコントローラーを作成すると、Angularjs は $scope を生成してコントローラーに渡します。Angularjs はコントローラーを自動的にインスタンス化するため、コンストラクターを記述するだけで済みます。次の例は、コントローラーの初期化を示しています:

function my Controller($scope){
 $scope.msg="hello,world!"; 
}

ログイン後にコピー

上記のコントローラー作成方法はグローバル名前空間を汚染します。より合理的な方法は、次のようにモジュールを作成してから、そのモジュール内にコントローラーを作成することです。

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})

ログイン後にコピー

組み込みコマンド ng-click を使用して、ボタン、リンク、その他の DOM 要素をクリックイベントにバインドします。 ng-click ディレクティブは、ブラウザーのマウスアップイベントを DOM 要素に設定されたイベントハンドラーにバインドします (たとえば、ブラウザーが DOM 要素でクリックイベントをトリガーすると、関数が呼び出されます)。前の例と同様に、バインディングは次のようになります:

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

ログイン後にコピー

ボタンとリンクは内部 $scope の操作にバインドされており、要素がクリックされると、AngularJS は対応するメソッドを呼び出します。どの関数を呼び出すかを設定するとき、パラメータ (add(1)) も括弧内に渡されることに注意してください

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});

ログイン後にコピー

Angularjs と他のフレームワークの最大の違いは、コントローラーがデータモデルの保存以外の DOM 操作、フォーマットまたはデータ操作、および状態維持操作の実行には適していないことです。これはビューと $scope の間の単なるブリッジです。。

コントローラーのネスト (スコープにスコープが含まれる)

AngularJS アプリケーションのどの部分にも、どのコンテキストでレンダリングされるかに関係なく、親スコープがあります。 ng-app が配置されているレベルの親スコープは $rootScope です。

デフォルトでは、AngularJS は現在のスコープでプロパティが見つからない場合、親スコープでプロパティを探します。 AngularJS が対応する属性を見つけられない場合、$rootScope に到達するまで親スコープに沿って上向きに検索します。 $rootScope で見つからない場合、プログラムは引き続き実行されますが、ビューは更新されません。

例を通してこの動作を見てみましょう。ユーザーオブジェクトを含む ParentController を作成し、このオブジェクトを参照する ChildController を作成します。

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});

ログイン後にコピー

ChildController を ParentController 内に配置すると、ChildController の $scope オブジェクトの親スコープは、ParentController の $scope オブジェクトになります。プロトタイプ継承の仕組みにより、子スコープ内のParentControllerの$scopeオブジェクトにアクセスすることができます。

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>

ログイン後にコピー

上記がこの記事の全内容です。これがあなたの学習に役立ち、AngularJS コントローラーに慣れるのに役立つことを願っています。