ダッシュボードからホームコントローラースコープにアクセスしようとしています 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
}
式バインディングを使用しています。
_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>
_