angularjs - AngularJS:ディレクティブスコープの=と@の違い?

Question

ディレクティブ内に分離スコープを作成すると、外側のスコープを内側のスコープにマップできます。属性にマップする 6 つの異なる方法を見てきました。

1. =属性
2. &属性
3. @attr
4. =
5. &
6. @

これらのスコープ マッピング オプションはそれぞれ何をしますか?

Answer 1

概要

1. @attrは、一致する DOM 属性の評価された文字列値にバインドします。
2. =attrは、一致する DOM 属性のスコーププロパティにバインドします。
3. &attrは、一致する DOM 属性のスコープfunctionにバインドします。
4. @
5. =
6. &

ターゲット DOM 属性の名前が分離スコープ プロパティ名と一致する場合は、4、5、および 6を使用します。これは、次の例の実用的なフィドルです。

HTML

<div ng-app='isolate'>
     <h3>Outer Scope</h3>

    <input type="text" ng-model="myModel" />
    <p>msg: {{ msg }}</p>
     <h3>Inner Scope</h3>

    <div id="inner">
        <div my-directive at="{{ myModel }}" equals="myModel" ampersand="msg=msg+'click'"></div>
    </div>
</div>

Javascript

angular.module('isolate', [])
    .directive('myDirective', function () {
    return {
        template:
            '<label>@attr</label><input value="{{ myAt }}" />' +
            '<label>@</label><input value="{{ at }}" />' +
            '<label>=attr</label><input ng-model="myEquals" />' +
            '<label>=</label><input ng-model="equals" />' +
            '<label>&attr</label><input type="button" ng-click="myAmpersand()" value="Btn" />' +
            '<label>&</label><input type="button" ng-click="ampersand()" value="Btn" />',
        scope: {
            myAt: '@at',
            myEquals: '=equals',
            myAmpersand: '&ampersand',
            at: '@',
            equals: '=',
            ampersand: '&'
        }
    };
});