单击折叠的扭曲图标时,无法从getChildrenNodes()
伪指令中调用控制器函数leafExpanded
。
这是我的控制器:
function EzReportConfigController($scope, $element, $attrs, $http, runReportService, userEmailService, cronSchedulerService, ParentListService, localiser, ivhTreeviewOptions) {
var that = this;
$scope.nodes = ParentListService.parentNode;
var data = $scope.nodes;
data[0].children = [{
code: "002",
name: "loading..",
fakechildren: true
}];
//loading only nodes in data
$scope.nodeid = $scope.nodes[0].Code;
$scope.addCheckState = function (data) {
for (var i = 0; i < data.length; i++) {
if (data[i].hasOwnProperty("HasChecked") == false) {
data[i].HasChecked = true;
}
}
}
$scope.addCheckState(data);
$scope.getChildrenNodes = function (nodeid) {
debugger;
$http.post("Report/GetChildTreeNodes", { directoryCode: nodeid }).then(function (response) {
$scope.childResponse = response.data;
$scope.addCheckState($scope.childResponse);
$scope.insertChildResponse(data, nodeid);
});
};
$scope.insertChildResponse = function (data, nodeid) {
for (var i = 0; i < data.length; i++) {
debugger;
if (data[i].Code === nodeid) {
data[i].children = $scope.childResponse;
return
}
if (data[i].children !== undefined) {
$scope.insertChildResponse(data[i].children, nodeid);
}
}
$scope.nodes = data;
}
}
EzReportConfigController.$inject = ['$scope', '$element', '$attrs', '$http', 'runReportService', 'userEmailService', 'cronSchedulerService', 'ParentListService', 'localiser','ivhTreeviewOptions'];
树节点的HTML:
<div class="treeview" ivh-treeview="nodes"
ivh-treeview-expand-to-depth="0"
ivh-treeview-id-attribute="'Code'"
ivh-treeview-label-attribute="'Name'"
ivh-treeview-children-attribute="'children'"
ivh-treeview-node-tpl="tpl" ivh-treeview-selected-attribute="'selected'"
ivh-treeview-twistie-tpl="leafExpanded">
</div>
ivhTreeView Custome指令用于折叠的扭曲对象:
app.config(['ivhTreeviewOptionsProvider',
function (ivhTreeviewOptionsProvider) {
ivhTreeviewOptionsProvider.set({
twistieExpandedTpl: '<span class="show-hide"><i class="fa fa-minus"></i></span>',
twistieCollapsedTpl: '<leaf-expanded nodeid="nodeid" get-children-nodes="getChildrenNodes(node)"></leaf-expanded>'
});
}])
app.directive('leafExpanded', ['ivhTreeviewMgr', 'ivhTreeviewBfs', '$http', function (ivhTreeviewMgr, ivhTreeviewBfs, $http) {
var linkFn = function (scope, element, attrs, ctrl) {
debugger;
element.bind('click', function () {
scope.$apply(function () {
debugger;
getChildrenNodes({ node: scope.$parent.node.Code });
});
});
};
return {
restrict: 'AE',
require: '^ivhTreeview',
scope: {
getChildrenNodes: "&",
node: "=",
id: "=",
},
template: [
'<span class="show-hide"><i class="fa fa-plus"></i></span>'].join('\n'),
link: linkFn
}
}]);
现在的问题是,单击getChildrenNodes()
指令时未调用leaf-expanded
函数。