Question

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

我在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>

没有反应。我怎么能这样做呢？我很感激你的帮助。最好的问候;）

Answer 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>

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

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

1 个答案:

The DEMO