gpt4 book ai didi

angularjs - 使用表达式 `("&")` 绑定(bind)将数据从 AngularJS 组件传递到父范围

转载 作者:行者123 更新时间:2023-12-03 09:46:38 25 4
gpt4 key购买 nike

无法从 Angular 组件输出绑定(bind)功能访问 Controller 范围
我正在尝试从仪表板 component 访问我的家庭 Controller 范围但它是未定义的。
我也尝试了第二种方法,但我的函数变量未定义。
我正在使用带有 Typescript 的 Angular 1.5
第一种方法:
家庭 Controller HTML:

<div class="home-container">
<dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged">
</dashboard-component>
</div>
家庭 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);
}
仪表板 Controller js:
angular.module('app.dashboard')
.component('dashboardComponent', {
templateUrl: 'app/dashboard/directives/dashboard-container.html',
controller: DashboardComponent,
controllerAs: 'DashboardCtrl',
bindings: {
onTileTypeChanged: "&"
}
});

this.onTileTypeChanged()(tile);
第二种方法:
家庭 Controller HTML:
<div class="home-container">
<dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged()">
</dashboard-component>
</div>
仪表板 Controller js:
this.onTileTypeChanged(tile);
在这里,我得到了相反的结果:
private onTileTypeChanged(tile:ITile) {
console.log(tile); // NOT DEFINED
console.log(this); // DEFINED AND WORKING
}

最佳答案

tl;博士;见下面的演示
您正在使用表达式绑定(bind)。

angular.module('app.dashboard')
.component('dashboardComponent', {
templateUrl: 'app/dashboard/directives/dashboard-container.html',
controller: DashboardComponent,
controllerAs: 'DashboardCtrl',
bindings: {
onTileChange: "&"
}
})t
要将事件数据从组件传递到父 Controller :
实例化 dashboard-component和:
<dashboard-component on-tile-change="HomeCtrl.onTileChange($tile)">
</dashboard-component>
在组件 Controller 中使用本地调用函数:
this.onTileChange({$tile: tile});
注入(inject)本地人的约定是用 $ 命名它们。前缀以将它们与父作用域上的变量区分开来。
从文档:
  • & 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 definition scope: { localFn:'&myAttr' }, the isolate scope property localFn will point to a function wrapper for the count = count + value expression. 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 is increment($amount) then we can specify the amount value by calling the localFn as localFn({$amount: 22}).

-- AngularJS Comprehensive Directive API Reference

使用表达式( "&")绑定(bind)传递数据的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>

关于angularjs - 使用表达式 `("&")` 绑定(bind)将数据从 AngularJS 组件传递到父范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35537766/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com