通知控制器指令中的更改

Question

我有一个指令如下：

(function () {
    'use strict';

    angular.module('components.tree-component').directive('myTree', myTreeDirective);

    myTreeDirective.$inject = ['$http', '$compile', 'loggerFactory', '$q'];

    function myTreeDirective($http, $compile, loggerFactory, $q) {

        
        function addActionButtons(scope, element, attrs, tree) {
            var actionButtons = '<span class="action-button-container">' +
                '<md-button class="md-icon-button" aria-label="Nouveau" ng-click="createNode($event)">' +
                '<md-icon class="material-icons">add_circle</md-icon>' +
                '</md-button>' +
                '<md-button class="md-icon-button" aria-label="Modifier" ng-click="renameNode($event)">' +
                '<md-icon class="material-icons">edit</md-icon>' +
                '</md-button>' +
                '<md-button class="md-icon-button" aria-label="Supprimer" ng-click="removeNode($event)">' +
                '<md-icon class="material-icons">delete_circle</md-icon>' +
                '</md-button>' +
                '</span>';
            // foreach node that has actions set to true append action buttons to it's DOM
            for (var node in scope.config.core.data) {
                if (scope.config.core.data[node].actions === true) {
                    $(tree).find('#' + scope.config.core.data[node].id).find('a:first').after($compile(actionButtons)(scope));
                }
            }

            scope.removeNode = function ($event) {
                $(element).jstree(true).delete_node($($event.currentTarget)[0].closest('.jstree-node').id);
            };

            scope.renameNode = function ($event) {
                $(element).jstree(true).edit($($event.currentTarget)[0].closest('.jstree-node').id, '', function (node, success, cancelled) {
                    addActionButtons(scope, element, attrs, tree);

                });
            };

            scope.createNode = function ($event) {
                var sel = $(element).jstree(true).create_node($($event.currentTarget)[0].closest('.jstree-node').id);
                if (sel) {
                    $(element).jstree(true).edit(sel, '', function (node, success, cancelled) {
                        addActionButtons(scope, element, attrs, tree);
                    });
                }
            };

            scope.$apply();
        }


        function init(scope, element, attrs) {
            plugins(scope, element, attrs, scope.config);
            // resolve the added tree view
            var promise = $q(function (resolve, reject) {
                scope.tree = $(element).jstree(scope.config);
                resolve(scope.tree);
            });
            // if the tree has actions option set to true call that addActionButtons functions
            if (attrs.treeActions) {
                if (scope.treeActions === true) {
                    promise.then(function (tree) {
                        addActionButtons(scope, element, attrs, tree);
                    });
                }
            }
            events(scope, element, attrs);
        }

        /*
         * Link function
         */
        function linkFn(scope, element, attrs) {
            $(function () {

                if (attrs.treeCore) {
                    scope.config.core = $.extend(scope.config.core, scope[attrs.treeCore]);
                }

                scope.config.search.show_only_matches = attrs.treeFilterMode ? scope.treeFilterMode : false;
                scope.config.search.show_only_matches_children = attrs.treeFilterShowChildren ? scope.treeFilterShowChildren : false;

                // clean Case
                attrs.treeData = attrs.treeData ? attrs.treeData.toLowerCase() : '';
                attrs.treeSrc = attrs.treeSrc ? attrs.treeSrc.toLowerCase() : '';

                // source of data can be an html web page, a json file, an ajax call or a scope variable
                if (attrs.treeData === 'html') {
                    fetchResource(attrs.treeSrc, function (data) {
                        element.html(data);
                        init(scope, element, attrs);
                    });
                } else if (attrs.treeData === 'json') {
                    fetchResource(attrs.treeSrc, function (data) {
                        scope.config.core.data = data;
                        init(scope, element, attrs);
                    });
                } else if (attrs.treeData === 'scope') {
                    $(element).jstree('destroy');
                    init(scope, element, attrs);
                } else if (attrs.treeAjax) {
                    scope.config.core.data = {
                        'url': attrs.treeAjax,
                        'data': function (node) {
                            return {
                                'id': node.id !== '#' ? node.id : 1
                            };
                        }
                    };
                    init(scope, element, attrs);
                }
            });
        }

        // expose directive
        return {
            restrict: 'E',
            link: linkFn,
            scope: {
                ngModel: "=",
                treeTypes: "=treeTypes",
                treeEvents: "=treeEvents",
                treeFilterMode: "=treeFilterMode",
                treeFilterShowChildren: "=treeFilterShowChildren",
                treeActions: "=treeActions"
            },
            controller: function ($scope) {
                var vm = this;
                $scope.config = {};
                $scope.config.core = {};
                $scope.config.search = {};
                $scope.tree = {};
                vm.$onChanges = function () {
                    $scope.config.core.data = $scope.ngModel;
                };
            },
            controllerAs: 'vm'
        };
    }
})();

我将此指令称为 a ，view exemple-tree-view.html如下所示：

<my-tree tree-plugins="state" tree-actions="true"  ng-model="sampleTreeView.listNoeuds" tree-data="scope" />

该视图有一个名为 的控制器sampleTreeView。

在我的指令中，该addActionButtons函数是从该init函数调用的，该函数本身是从该指令的链接函数调用的。

在函数中，addActionButtons我为指令的控制器范围声明了三个函数：scope.removeNode、scope.renameNode和scope.createNode，这些函数将执行一些 DOM 操作，并接受参数一个回调函数，该函数接收三个参数：node、success、 和cancelled，在这些函数内我想通知sampleTreeView控制器已经进行了更改，并将这三个参数传递给它，这样我就可以使用这三个参数执行一些处理。

我怎样才能做到这一点？

Answer 1

您可以使用 Angular Broadcast Service 来实现：

在指令中：

$rootScope.$broadcast('some-event', { any: {} });//pass params you want to pass

在控制器中：

 var deregister =  $rootScope.$on('some-event', function(event, args) {
        console.log(args)//passed params
    });

要取消注册，请像这样调用它：

deregister();