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

【问题标题】：Using expression `("&")` binding to pass data from AngularJS component to parent scope使用表达式 `("&")` 绑定将数据从 AngularJS 组件传递到父范围
【发布时间】：2016-06-02 22:36:54
【问题描述】：

无法从角度组件输出绑定函数访问控制器范围

我正在尝试从仪表板 component 访问我的家庭控制器范围，但它未定义。

我也尝试了第二种方法，但我的函数变量未定义。

我正在使用带有 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
}

【问题讨论】：

dashboard-component 的绑定是什么？
试过使用controllerAs语法吗？
@georgeawg 添加，控制器中的函数已触发，但我无法同时访问控制器范围和输入变量。
我的意思是 homecontroller，你如何将 homecontroller 绑定到视图？你在用路由器吗？
@Yerken 是的，我正在使用带有 controllerAs 语法的路由器

标签： angularjs angularjs-components isolate-scope

【解决方案1】：

tl;博士;见下面的演示

您正在使用表达式绑定。

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}) 来指定金额值。

-- AngularJS Comprehensive Directive API Reference

使用表达式（`"&"`）绑定传递数据的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>

【讨论】：

这仅适用于 Angular 1.5.9 吗？
表达式绑定是 AngularJS 1.2 的一部分。在指令中，它是通过指令定义对象的scope 属性完成的。

无法从角度组件输出绑定函数访问控制器范围

tl;博士;见下面的演示

使用表达式（"&amp;"）绑定传递数据的DEMO

使用表达式（`"&"`）绑定传递数据的DEMO