web-dev-qa-db-ja.com

式 `（"＆ "）`バインディングを使用して、AngularJSコンポーネントから親スコープにデータを渡します

angularコンポーネント出力バインディング関数からコントローラースコープにアクセスできません

ダッシュボードからホームコントローラースコープにアクセスしようとしています component ですが、未定義です。

2番目のアプローチも試しましたが、関数変数が未定義です。

TypeScriptでAngular 1.5を使用しています

最初のアプローチ：

ホームコントローラーHTML：

<div class="home-container">
    <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged">
    </dashboard-component>
</div>

ホームコントローラーjs：

namespace app.dashboard {
    'use strict';

    class HomeController {
        static $inject:Array<string> = ['$window'];

        constructor(private $window:ng.IWindowService) {

        }

        private onTileTypeChanged(tile:ITile) {
            console.log(tile); // DEFINED AND WORKING
            console.log(this); // NOT DEFINED
        }
    }

    angular
        .module('app.dashboard')
        .controller('HomeController', HomeController);
}

ダッシュボードコントローラーjs：

angular.module('app.dashboard')
    .component('dashboardComponent', {
        templateUrl: 'app/dashboard/directives/dashboard-container.html',
        controller: DashboardComponent,
        controllerAs: 'DashboardCtrl',
        bindings: {
            onTileTypeChanged: "&"
        }
    });

this.onTileTypeChanged()(tile);

2番目のアプローチ：

ホームコントローラーHTML：

<div class="home-container">
    <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged()">
    </dashboard-component>
</div>

ダッシュボードコントローラーjs：

this.onTileTypeChanged(tile);

そしてここで私は反対を得ています：

private onTileTypeChanged(tile:ITile) {
    console.log(tile); // NOT DEFINED
    console.log(this); // DEFINED AND WORKING
}
angularjsangularjs-componentsisolate-scope
14
Dor Cohen

tl; dr;以下のデモを参照してください

式バインディングを使用しています。

_angular.module('app.dashboard')
    .component('dashboardComponent', {
        templateUrl: 'app/dashboard/directives/dashboard-container.html',
        controller: DashboardComponent,
        controllerAs: 'DashboardCtrl',
        bindings: {
            onTileChange: "&"
        }
    })t
_

コンポーネントから親コントローラーにイベントデータを通信するには：

_dashboard-component_を次のようにインスタンス化します。

_<dashboard-component on-tile-change="HomeCtrl.onTileChange($tile)">
</dashboard-component>
_

コンポーネントコントローラで、ローカルで関数を呼び出します。

_this.onTileChange({$tile: tile});
_

注入されたローカルの規則は、親スコープの変数と区別するために、_$_プレフィックスを付けて名前を付けることです。

ドキュメントから：

  • _&_または_&attr_-親スコープのコンテキストで式を実行する方法を提供します。属性名が指定されていない場合、属性名はローカル名と同じであると見なされます。 _<my-component my-attr="count = count + value">_と分離スコープ定義_scope: { localFn:'&myAttr' }_が与えられると、分離スコーププロパティlocalFnは_count = count + value_式の関数ラッパーを指します。多くの場合、分離されたスコープから式を介して親スコープにデータを渡すことが望ましいです。これは、ローカル変数の名前と値のマップを式ラッパーfnに渡すことで実行できます。たとえば、式がincrement($amount)の場合、localFnをlocalFn({$amount: 22})として呼び出すことで金額の値を指定できます。

-- AngularJS Comprehensive Directive APIリファレンス

式（_"&"_）バインディングを使用してデータを渡すデモ

_angular.module("app",[])
.directive("customDirective",function() {
    return {
        scope: {
            onSave: '&',
        },
        template: `
            <fieldset>
                <input ng-model="message"><br>
                <button ng-click="onSave({$event: message})">Save</button>
            </fieldset>
        `,
    };
})_
_<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <custom-directive on-save="message=$event">
    </custom-directive>
    <br>
    message={{message}}
</body>_
12
georgeawg