web-dev-qa-db-ja.com

AngularJSの$ scopeとは何ですか？

私はAngularJSを初めて使用しますが、_$scopeはAngularJSにあります。誰かができる限り簡単な方法で説明してください$scope AngularJSで行うことと、それを何に使用できるか。プログラミングの知識がまったくない人を説明するような方法で説明してください。また、誰かが以下のコードを可能な限り簡単な方法で行ごとに説明できますか？

function MyController($scope) {
    $scope.username = 'World';

    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.username + '!';
    };
};
javascriptangularjsscope
41
Skywalker

すべてのコントローラーには、関連する$scopeオブジェクト。

コントローラー（コンストラクター）関数は、モデルのプロパティと関数の設定を担当します。これは、$ scopeを介してのみ実行できます。ビュー（htmlファイル）で適用する関数またはモデルは、スコープを使用してコントローラーでアクセスされます。

この$ scopeオブジェクトで定義されたメソッドのみがHTML/viewからアクセス可能です。例-ng-クリック、フィルターなどから.

それでは、例を1つずつ見ていきましょう。

1。

 function MyController($scope) {
 $scope.username = 'World';
 };

上記の例では、usernameという名前の属性を「World」という値で定義しています。 htmlファイルに次のコード行があるとします–

<div ng-controller="MyController">
<h1>{{data.username}}</h1></div>

これにより、コントローラーから値が自動的に取得され、画面に表示されます。その「データ」に注目する価値があります。マークアップのは、htmlページがコントローラーを参照できるコントローラーの名前です。これは通常、コントローラー内またはhtmlファイルの上部で定義されます。

2。

$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};

これはコントローラーで定義した関数であり、次のコードでビューにアクセスできます–

<div ng-controller="MyController">
<h1>{{data.greeting}}</h1></div>

ここで、data.greetingは自動的にsayHello関数から値を選択します。つまり、表示される値は「Hello World」になります。前に「Hello」と連結されたユーザー名からの「World」。

これがあなたの疑念をクリアすることを願っています。 :)

55
Manvi

次のマニュアルを読む 。

つまり、スコープは、コントローラーを適用するDOM要素に「バインド」する「オブジェクト」です。すべての子要素は、スコープデータを読み取って変更できます（新しいスコープのプリミティブを変更したり、それらが分離されていない限り）。

8
Miraage