使用表达式`（“＆”）`绑定将数据从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' }，isolate scope属性localFn将指向count = count + value表达式的函数包装。通常，需要将数据从隔离范围通过表达式传递到父范围。这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成。例如，如果表达式为，increment($amount)则可以通过调用localFnas
来指定金额值localFn({$amount: 22})。
-
AngularJS综合指令API参考
使用expression（"&"）绑定传递数据的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>
-
问题内容： 在React中，我有类似的文件 parent.js 包含文本框和按钮 child.js 包含P标签 App.js 包含父组件和子组件 问题 将“父级”上的“文本框”值传递给子级，并将其显示在子级标记中。 完整代码 堆叠 问题答案： 更新了示例以将数据传递给子组件。 https://stackblitz.com/edit/react- trmj9i?file=child.js 在下面添加
-
问题内容： 在我正在从事的新项目中，我开始使用组件而不是指令。 但是，我遇到一个无法找到具体标准方法的问题。 从孩子向父母通知事件很容易，您可以在下面的我的plunkr上找到它，但是从父母向孩子通知事件的正确方法是什么？ Angular2似乎通过使用以下方法解决了此问题：https ://angular.io/docs/ts/latest/cookbook/component-communicat
-
问题内容： 我正在尝试将数据从子组件发送到其父组件，如下所示： 这是子组件： 我需要的是由用户在父组件中获取选定的值。我收到此错误： 谁能帮我发现问题？ PS子组件正在从json文件创建一个下拉列表，并且我需要该下拉列表来显示json数组的两个元素彼此相邻（例如：“ aaa，english”是首选！） 问题答案： 这应该工作。在发送回道具时，您将其作为对象发送，而不是作为值发送，或者将其用作父组件
-
我制作了一个VueJS组件，可以运行一些
-
问题内容： 我有两个组成部分： 第一个是父组件，它是通常的React组件。 第二个是孩子，它是功能组件。 我想将 Titles 的值（处于子状态）传递给父Component。这是我的 子组件 代码： 这是我的 父组件 ： 这看起来很容易，但这是我第一次使用功能组件。你能帮我吗 ？ 问题答案： React就是关于在组件树中向下流动的数据。如果您希望能够显示和/或修改彼此之间的共享状态，则应提升状态并
-
我有两个组件，一个是子组件，另一个是父组件。我正在有条件地撕裂我的子组件。这段代码的功能就是当你们点击按钮时，定时器将显示，当你们点击停止定时器将停止。这里“Timer”是子组件，我在“Timer”组件中使用了state属性，我想在单击“stop Timer button”之前显示Timer的值。那么如何将“timer”状态变量值从子组件传递到父组件呢。 这是父组件，下面的代码用于“计时器”组件。