我的指令如下：
(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'
};
}
})();
我从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控制器变更已经已经完成，并将这三个参数传递给它，所以我可以使用这三个参数进行一些处理。
我该怎么做？
答案 0 :(得分：3)
您可以使用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();