使用表达式`(“&")`绑定将数据从AngularJS组件传递到父范围 [英] Using expression `("&")` binding to pass data from AngularJS component to parent scope
本文介绍了使用表达式`(“&")`绑定将数据从AngularJS组件传递到父范围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
无法通过角度组件输出绑定功能访问控制器作用域
我正在尝试从仪表板组件访问我的家庭控制器范围，但未定义.
我也尝试了第二种方法，但是我的函数变量未定义.
我正在将Angular 1.5与Typescript一起使用
第一种方法:
家庭控制器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
}
解决方案
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-提供了一种在父作用域的上下文中执行表达式的方法.如果未指定attr名称，则假定属性名称与本地名称相同.给定<my-component my-attr="count = count + value">和隔离范围定义scope: { localFn:'&myAttr' }，隔离范围属性localFn将指向count = count + value表达式的函数包装.通常，需要通过表达式将数据从隔离范围传递到父范围.这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成.例如，如果表达式为increment($amount)，则可以通过将localFn称为localFn({$amount: 22})来指定金额值.
使用表达式("&")绑定传递数据的DEMO
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>
Can't access controller scope from angular component output binding function
I'm trying to access my home controller scope from dashboard component but it's undefined.
I also tried a second approach but then my function variable is undefined.
I'm using Angular 1.5 with Typescript
FIRST APPROACH:
Home controller HTML:
<div class="home-container">
<dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged">
</dashboard-component>
</div>
Home controller 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);
}
Dashboard controller js:
angular.module('app.dashboard')
.component('dashboardComponent', {
templateUrl: 'app/dashboard/directives/dashboard-container.html',
controller: DashboardComponent,
controllerAs: 'DashboardCtrl',
bindings: {
onTileTypeChanged: "&"
}
});
this.onTileTypeChanged()(tile);
SECOND APPROACH:
Home controller HTML:
<div class="home-container">
<dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged()">
</dashboard-component>
</div>
Dashboard controller js:
this.onTileTypeChanged(tile);
And here I'm getting the opposite:
private onTileTypeChanged(tile:ITile) {
console.log(tile); // NOT DEFINED
console.log(this); // DEFINED AND WORKING
}
解决方案
tl;dr; see Demo below
You are using expression binding.
angular.module('app.dashboard')
.component('dashboardComponent', {
templateUrl: 'app/dashboard/directives/dashboard-container.html',
controller: DashboardComponent,
controllerAs: 'DashboardCtrl',
bindings: {
onTileChange: "&"
}
})t
To communicate event data from a component to a parent controller:
Instantiate the dashboard-component with:
<dashboard-component on-tile-change="HomeCtrl.onTileChange($tile)">
</dashboard-component>
In the component controller invoke the function with locals:
this.onTileChange({$tile: tile});
The convention for injected locals is to name them with a $ prefix to differentiate them from variables on parent scope.
From the Docs:
&or&attr- provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given<my-component my-attr="count = count + value">and the isolate scope definitionscope: { localFn:'&myAttr' }, the isolate scope propertylocalFnwill point to a function wrapper for thecount = count + valueexpression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope. This can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression isincrement($amount)then we can specify the amount value by calling thelocalFnaslocalFn({$amount: 22}).
-- AngularJS Comprehensive Directive API Reference
DEMO of using expression ("&") binding to pass data
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>
这篇关于使用表达式`(“&")`绑定将数据从AngularJS组件传递到父范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
