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

Using expression `("&")` binding to pass data from AngularJS component to parent scope

无法从 angular 组件输出绑定函数访问控制器作用域

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

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

我正在使用 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；博士；请参阅下面的演示

您正在使用表达式绑定。

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});

注入局部变量的约定是使用 $ 前缀命名它们，以将它们与父作用域中的变量区分开来。

来自文档：

  • & 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

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