javascript - 努力在 Angular 1.6 组件中将参数作为事件传递

Question

我的任务是在 Angular 1.6 中开发一个应用程序，但我已经有一段时间没有开发任何 Angular 1.x 了。主要是在做 2.x。事实上，根本没做过 1.6。

我有两个组件:一个 tile 容器和一个 tile。这些图 block 是可选择的，所以我想象有一个图 block 容器组件可以跟踪选择了哪个图 block ，以及一个主要是 UI 组件的图 block 组件。

我的 tile 组件如下所示:

// dp-claim-filter-tile.component.js
function ClaimFilterTileController() {
    var ctrl = this;

    ctrl.isDisabled = () => {
        return ctrl.claimCount == 0;
    }

    ctrl.test = function () {
        console.log('ctrl = ' + JSON.stringify(ctrl));
        ctrl.onTileClicked(ctrl);
    }
}

angular.module('dpApp').component('dpClaimFilterTile', {
    templateUrl: '/templates/dp-claim-filter-tile.tmpl.html',
    controller: ClaimFilterTileController,
    bindings: {
        tileTitle: '@',
        claimCount: '@',
        isAdd: '<',
        isActive: '<',
        onTileClicked: '&'
    }
});

模板看起来像这样:

// dp-claim-filter-tile.tmpl.html
<div ng-if="$ctrl.isAdd===true" layout="column" layout-align="space-around center">
    <div><h2 class="md-title">{{$ctrl.tileTitle}}</h2></div>
    <div>
        <md-icon md-font-icon="fa-plus" class="fa fa-2x"></md-icon>
    </div>
</div>
<div ng-if="$ctrl.isAdd!==true" layout="column" layout-align="space-around center" ng-click="$ctrl.test()">
    <div><h2 class="md-title tile-text">{{$ctrl.tileTitle}}</h2></div>
    <div class="md-display-1 tile-text">{{$ctrl.claimCount}}</div>
</div>

图 block 容器组件如下所示:

// dp-claim-filter-tiles.component.js
function ClaimFilterTilesController() {
    var ctrl = this;

    ctrl.tileClicked = function(tile) {
        console.log('tile = ' + JSON.stringify(tile));
    }
}

angular.module('dpApp').component('dpClaimFilterTiles', {
    templateUrl: '/templates/dp-claim-filter-tiles.tmpl.html',
    controller: ClaimFilterTilesController
});

容器 UI 的摘录如下所示:

// dp-claim-filter-tiles.tmpl.html
<md-grid-tile>
    <dp-claim-filter-tile is-active="true" tile-title="Links Sent" claim-count="7" on-tile-clicked="$ctrl.tileClicked($event)"></dp-claim-filter-tile>
</md-grid-tile>

我所期待和希望的是我提供给表面的 $event 参数作为 ClaimFilterTilesController.tileClicked() 函数的参数。

我该如何实现？

Answer 1

click $event将在 ngClick 指令本身中可用，在实际的 ngClick 指令被触发之前，您将无法携带它。

因此，您可以在 dp-claim-filter-tile.tmpl.html 模板中专门访问点击事件，如下所示:

ng-click="$ctrl.test($event, otherParam)"