首页 文章

使用表达式`（“＆”）`绑定将数据从AngularJS组件传递到父作用域

提问于
浏览 次
12

无法从角度分量输出绑定功能访问控制器范围

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

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

我正在使用带有Typescript的Angular 1.5

FIRST APPROACH:

家庭控制器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);

SECOND APPROACH:

家庭控制器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
}
angularjs angularjs-components isolate-scope

1 回答

  • 10

    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>

    在组件控制器中使用locals调用该函数：

    this.onTileChange({$tile: tile});

    注入本地的约定是使用 $ 前缀命名它们，以区别于父作用域上的变量 .

    来自Docs：

    ＆or＆attr - 提供了在父作用域的上下文中执行表达式的方法 . 如果未指定attr名称，则假定属性名称与本地名称相同 . 给定<my-component my-attr =“count = count value”>和隔离范围定义范围：{localFn：'＆myAttr'}，隔离范围属性localFn将指向count = count值表达式的函数包装器 . 通常需要通过表达式将数据从隔离范围传递到父范围 . 这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成 . 例如，如果表达式是递增（$ amount），那么我们可以通过将localFn称为localFn（{$ amount：22}）来指定金额值 .

    使用表达式（“＆”）绑定传递数据的演示

    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>
    回复于

相关问题