Dor*_*hen 13 angularjs isolate-scope angularjs-components
我正在尝试从仪表板组件访问我的家庭控制器范围,但它未定义.
我也尝试了第二种方法,但后来我的函数变量未定义.
我正在使用带有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);
第二种方法:
家庭控制器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
}
geo*_*awg 11
您正在使用表达式绑定.
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>
在组件控制器中使用locals调用该函数:
this.onTileChange({$tile: tile});
注入本地的约定是用$前缀命名它们,以区别于父作用域上的变量.
来自Docs:
&或&attr- 提供在父作用域的上下文中执行表达式的方法.如果未指定attr名称,则假定属性名称与本地名称相同.给定<my-component my-attr="count = count + value">和隔离范围定义scope: { localFn:'&myAttr' },隔离范围属性localFn将指向count = count + value表达式的函数包装器.通常需要通过表达式将数据从隔离范围传递到父范围.这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成.例如,如果表达式是,increment($amount)那么我们可以通过调用localFnas 来指定金额值localFn({$amount: 22}).
"&")绑定传递数据的演示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>