如何在兄弟组件指令之间传递事件答案

【问题标题】：How to communicate events between sibling component directives如何在兄弟组件指令之间传递事件
【发布时间】：2018-05-28 12:54:50
【问题描述】：

angular JS $watch 和两个指令之间的通信

我在 AngularJs 中有一个代码，当另一个指令中的变量状态发生变化时，我想在一个指令中调用函数。我有一个控制器：

app.controller('TaskerCtrl', ['$scope', function($scope) {

        $scope.tasksReload = false;        
    }
]);

我们可以看到这里是变量tasksReload。当该变量的状态在其他指令中更改为 true 时，我想在我的指令之一中调用函数。下面我展示了我的指令代码：

app.directive('newTaskWidget', function (TaskerForm, Consultants) {
            return {
                restrict: 'E',
                scope: {
                    sortReverse: '=sortReverse',
                    tasksReload: '=tasksReload'
                },
       scope.test = function(){
                    scope.tasksReload = true;
       }

app.directive('taskListWidget', function ($filter, $uibModal, Notification, TaskerForm, Consultants) {
    return {
        restrict: 'E',
        scope: {
            sortReverse: '=sortReverse',
            departments: '=departmtens',
            myDepartment: '=myDepartment',
            tasksReload: '=tasksReload'
        },
        link: function (scope) {

            scope.$watch('tasksReload', function (data) {

                console.log("Musze przeladowac taski");
            });

下面我展示了带有我的指令的 HTML 代码：

<new-task-widget sort-reverse="false" tasks-reload = 'tasksReload'>
</new-task-widget>

<task_list_widget sort-reverse="false" departmtens = "departments"
    my-department="session.user.department" tasks-reload = 'tasksReload'>
</task_list_widget>

正如我们在 newTaskWidget 中看到的，有一个函数 test。当值 scope.tasksReload = true; 已更改但无法正常工作时，我想在 taskListWidget 中调用 $watch 操作.我在按钮上使用 ng-click 指令调用该函数：

<button class="btn btn-primary validateButton" ng-click="test()">

    </button>

没有反应。我怎么能正确地做到这一点？我将不胜感激。最好的问候;）

【问题讨论】：

你放了 restrict: 'E' 并将其用作 HTML 中的属性。您是否错过了添加任何内容？
转到此链接：get controller scope from multi-level directives

标签： javascript angularjs angularjs-directive angularjs-components

【解决方案1】：

在兄弟组件之间传递点击事件的一种方法是使用scope.$root.$broadcast：

scope.$root.$broadcast("test-event",args);

在兄弟组件中，使用scope.$on:

scope.$on("test-event", function(event,args) {
    //Handle event here
});

The DEMO

angular.module("app",[])
.directive('newTaskWidget', function () {
    return {
        restrict: 'E',
        scope: { },
        template: `
          <fieldset>
            <button ng-click="test()">Click me</button>
          </fieldset>
        `,
        link: function(scope,elem,attrs) {
            scope.test = function(){
                scope.$root.$broadcast("test-event");
            };
        }
    };
})
.directive('taskListWidget', function () {
    return {
        restrict: 'E',
        scope: {},
        template: `<fieldset>clicks={{count}}</fieldset>`,
        link: function (scope) {
            scope.count=0;
            scope.$on('test-event', function (event) {
                scope.count++;
                console.log("Musze przeladowac taski");
            });
        }
    };
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <new-task-widget>
    </new-task-widget>

    <task_list_widget>
    </task_list_widget>
  </body>

【讨论】：