14

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

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

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
}
4

1 に答える 1

14

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 に渡すことで実行できます。たとえば、式が の場合、 asincrement($amount)を呼び出して金額の値を指定できます。localFnlocalFn({$amount: 22})

-- AngularJS の包括的なディレクティブ 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>

于 2016-02-21T16:44:58.113 に答える