Question

我是angularjs指令的新手。目前，我正在创建一个侧栏指令：

'use strict';

angular.module('sidebar', ['ngRoute'])
    .directive('sidebar', function () {
        return {
            restrict: 'E',
            templateUrl: "components/sidebar/sidebar.html",
            controller: 'SidebarController',
            scope: {
                accountProfileName: '@',
                accountProfileImage: '@',
                accountProfileTitle: '@',
                items: '='
            }
        };
    })
    .controller('SidebarController', ['$scope', function ($scope) {
        $scope.clickDetail = function (item) {
            $scope.$emit("sidebarItemClick", item);
            console.log('Emitted');
        }
    }]);

<div class="profile-sidebar">
    <!-- SIDEBAR USERPIC -->
    <div class="profile-userpic">
        <img ng-src="{{accountProfileImage}}"
             src="{{accountProfileImage}}"
             class="img-responsive" alt="">
    </div>
    <!-- END SIDEBAR USERPIC -->
    <!-- SIDEBAR USER TITLE -->
    <div class="profile-usertitle">
        <div class="profile-usertitle-name">
            {{accountProfileName}}
        </div>
        <div class="profile-usertitle-job">
            {{accountProfileTitle}}
        </div>
    </div>
    <!-- END SIDEBAR USER TITLE -->
    <!-- SIDEBAR BUTTONS -->
    <div class="profile-userbuttons">
        <button type="button" class="btn btn-success btn-sm">Follow</button>
        <button type="button" class="btn btn-danger btn-sm">Message</button>
    </div>
    <!-- END SIDEBAR BUTTONS -->
    <!-- SIDEBAR MENU -->
    <div class="profile-usermenu">
        <ul class="nav">
            <li ng-repeat="item in items"
                ng-class="item.enabled ? 'active' : ''">
                <a href="javascript:void(0);"
                   ng-click="clickDetail(item)">
                    <i class="{{item.icon}}">
                        <span>{{item.title}}</span>
                    </i>
                </a>
            </li>
        </ul>
    </div>
</div>

在我的index.html中，我想使用此代码：

<sidebar on-item-click="callbackOnItemClick($sidebarItem)"></sidebar>

我知道如何使用双向模型绑定，但我不知道如何使用事件发射器就像Angular 2中的输出一样。

有人可以帮我这么做吗？

谢谢，

Answer 1

使用$scope.$emit将触发$ scope上的事件（如父ctrl到子ctrl）。

使用$scope.$broadcast会在$ scope下面触发一个事件（比如子ctrl到父ctrl）。

使用$scope.$on是我们监听这些事件的方式（同时监听$ emit enter code here和$broadcast事件。）

https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

angularjs中的事件发射器回调

1 个答案: