AngularJS のカスタムディレクティブスコープ

1. AngularJS のカスタムディレクティブスコープ
2. AngularJS で Scope: False または共有スコープを使用する
3. AngularJS で Scope: True または継承されたスコープを使用する
4. AngularJS で Scope : {} または分離スコープを使用する
5. AngularJS で@または一方向バインディングを使用する
6. AngularJS で = または双方向バインディングを使用する
7. AngularJS で&またはメソッドバインディングを使用する

スコープにより、AngularJS は、別のオブジェクトが誤ってオブジェクトを変更しないようにすることができます。これは、オブジェクトの新しいコピーを作成し、それをメモリに保存することによって行われます。

スコープはセキュリティ対策としても使用され、権限のないユーザーがページ上のオブジェクトにアクセスするのを防ぎます。この記事では、共有スコープの使用、親スコープの継承、分離スコープなど、さまざまなスコープ関連のオプションと戦術について説明します。

AngularJS のカスタムディレクティブスコープ

AngularJS スコープは、AngularJS の重要な概念の 1つです。スコープは、特定の変数と関数の可視性を決定するために使用されます。

方向性について話しましょう。アプリケーションに固有の関数が必要で、それをアプリケーションセクション全体で利用したい場合は、コードセットを作成する必要があります。Angular ではディレクティブと呼ばれます。

スコープはすべてのディレクティブにリンクされています。このスコープは、テンプレート内のデータとメソッドにアクセスするために使用されます。

ディレクティブは、特に設定されていない限り、デフォルトではスコープを確立しません。その結果、ディレクティブは親のスコープを独自のスコープとして扱います。

ディレクティブ定義オブジェクトとして定義された構成オブジェクトを AngularJS に提供することで、ディレクティブのデフォルトのスコープを変更できます。トピックを深く掘り下げましょう。

AngularJS で Scope: False または共有スコープを使用する

親スコープと同一の単一のスコープを生成します。これは、親のスコープへの変更がディレクティブのスコープに反映されることを意味し、その逆も同様です。

JavaScript：

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: false,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML コード：

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

この例では、テキストボックスの名前を変更すると、ヘッダー名も変更されます。DDO には親スコープが含まれていないため、ディレクティブはその親スコープを利用します。

その結果、ディレクティブ内で行った変更はすべて親スコープにも適用されます。ここをクリックして、上記のコードの動作を確認してください。

AngularJS で Scope: True または継承されたスコープを使用する

これは、親のスコープではなく、派生スコープです。ディレクティブスコープを変更した場合、変更はコントローラスコープに反映されません。

ただし、親スコープへの変更はディレクティブスコープに反映されます。

JavaScript コード：

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: true,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML コード：

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

この例では、親スコープの値が画面に表示されます。しかし、テキストボックスの値を変更するとどうなりますか？

その後、子スコープのみが変更されます。親スコープが変更されていないことを示します。

ここをクリックして、上記のコードの動作を確認してください。

AngularJS で Scope : {} または分離スコープを使用する

分離されたスコープは、最も重要な側面の 1つです。ディレクティブはここで新しいスコープオブジェクトを作成しますが、親スコープは継承しません。したがって、親スコープはわかりません。

ただし、データを取得するにはどうすればよいですか。また、親スコープに接続していない場合は、データを編集するにはどうすればよいでしょうか。答えは、エンティティの属性を DDO に配置することです。ただし、最初にディレクティブに属性を設定する必要があります。

コントローラのプロパティまたはメソッドをディレクティブにリンクするために、分離スコープで 3つのプレフィックスを使用します。これがどのように機能するかを見てみましょう。

ディレクティブが DDO の scope プロパティでプレフィックスを検出すると、宣言された属性を使用してディレクティブが呼び出される HTML ページのディレクティブ宣言でプレフィックスを再確認します。

プレフィックスの後に、別の属性名を付けて名前を変更できます。

AngularJS には 3 種類のプレフィックスがあります。

1. @ - 単方向のバインディング
2. = - 直接モデルバインディング／双方向バインディング
3. & - メソッドバインディング

AngularJS で@または一方向バインディングを使用する

一方向バインディングとは、親がディレクティブに反映された属性を介してディレクティブスコープに何かを送信することを意味します。ただし、ディレクティブへの変更は親に反映されません。

文字列値は、@記号を使用して渡されます。

JavaScript コード：

var app = angular.module("Demo",[]);


app.directive("myDirective", function(){
    return {

 scope: {
            name: '@'
        },
        template: "<div>Name :  {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML コード：

<div ng-app="Demo">

    <div ng-controller="Hello">

        <div my-directive class='directive'></div>

    </div>
</div>
<div ng-app="Demo"></div>

ここをクリックして、上記のコードのライブデモを確認してください。

AngularJS で = または双方向バインディングを使用する

文字列ではなく、ディレクティブにオブジェクトを渡すために使用されます。このエンティティは、親側とディレクティブ側の両方から変更できます。

それが双方向と呼ばれる理由です。双方向バインディングを使用するには、スコープの代わりに = 記号を付ける必要があります。

scope: {

 name: "="

}

AngularJS で&またはメソッドバインディングを使用する

これは、任意の親のメソッドをディレクティブスコープに接続するために使用されます。ディレクティブの親メソッドを呼び出すときはいつでもこれを使用できます。

現在スコープ内にない関数を呼び出すために使用されます。メソッドバインディングを使用するには、スコープの代わりに&記号を配置する必要があります。

scope: {
     name: "&"
}

それでおしまい;それでも混乱する場合は、ここをクリックして公式ドキュメントをお読みください。