Skip to content

Conversation

@Kojotto
Copy link

@Kojotto Kojotto commented Jul 17, 2015

Moved all the functions that are used inside the template to be available from the controller.

What you can do now is something like this:
.directive("treecontrolfoldering", function() {
return {
restrict: "A",
require: "treecontrolFoldering",
link: function(scope, element, attributes, ctrl) {

                var isolateScope = element.isolateScope();

                ctrl.ensureDefault(element.isolateScope().options, "nodeFolderType", "FolderType");

                isolateScope.folderTypeClass = function (node) {
                    var destinationType = scope.foldering.getDestinationObject(node);
                    return destinationType.cssClass;
                };

                ctrl.defaultIsLeaf = function(node) {
                    return (!node[isolateScope.options.nodeChildren] || node[isolateScope.options.nodeChildren].length === 0) &&
                        (!node[isolateScope.options.nodeFolderType] || node[isolateScope.options.nodeFolderType].length === 0);
                }

                isolateScope.options.isLeaf = ctrl.defaultIsLeaf;

                var orderBy = "| orderBy:'Name'";
                var orderByFolderType = "| orderBy:'toString()'";

                var template =
                    '<ul ' + ctrl.classIfDefined(isolateScope.options.injectClasses.ul, true) + '>' +
                        '<li ng-repeat="node in node.' + isolateScope.options.nodeFolderType + ' | filter:filterExpression:filterComparator ' + orderByFolderType + '" ' + ctrl.classIfDefined(isolateScope.options.injectClasses.li, true) + ' class="folder-type">' +
                        '<i class="type-icon" ng-class="folderTypeClass(node)"></i>' +
                        '<div class="tree-label ' + ctrl.classIfDefined(isolateScope.options.injectClasses.label, false) + '" tree-transclude></div>' +
                        '</li>' +
                        '<li ng-repeat="node in node.' + isolateScope.options.nodeChildren + ' | filter:filterExpression:filterComparator ' + orderBy + '" ng-class="headClass(node)" ' + ctrl.classIfDefined(isolateScope.options.injectClasses.li, true) + '>' +
                        '<i class="tree-branch-head" ng-class="iBranchClass()" ng-click="selectNodeHead(node)"></i>' +
                        '<i class="tree-leaf-head ' + ctrl.classIfDefined(isolateScope.options.injectClasses.iLeaf, false) + '"></i>' +
                        '<div class="tree-label ' + ctrl.classIfDefined(isolateScope.options.injectClasses.label, false) + '" ng-class="[selectedClass(), unselectableClass()]" ng-click="selectNodeLabel(node)" tree-transclude></div>' +
                        '<treeitem ng-if="nodeExpanded()"></treeitem>' +
                        '</li>' +
                        '</ul>';

                ctrl.template = ctrl.recompileTemplate(template);
            }
        }
    });

Kojotto added 4 commits July 14, 2015 15:48
Added the function to the controller so that the directive can be more extensible. Now you can create your own directive that has a different template but can still use the original functions.

example:
        .directive("treecontrolfoldering", function () {
            return {
                restrict: "A",
                require: "treecontrol",
                link: function (scope, element, attributes, ctrl) {

                    ctrl.ensureDefault(ctrl.$scope.options, "nodeFolderType", "FolderType");

                    ctrl.$scope.folderTypeClass = function (node) {
                        var t = scope.foldering.getDestinationObject(node);
                        if (t.isFolderType) {
                            return t.cssClass;
                        }
                    };

                    ctrl.defaultIsLeaf = function (node) {
                        return (!node[ctrl.$scope.options.nodeChildren] || node[ctrl.$scope.options.nodeChildren].length === 0) &&
                            (!node[ctrl.$scope.options.nodeFolderType] || node[ctrl.$scope.options.nodeFolderType].length === 0);
                    }

                    ctrl.$scope.options.isLeaf = ctrl.defaultIsLeaf;

                    ctrl.orderBy = "| orderBy:'Name'";
                    ctrl.orderByFolderType = "| orderBy:'toString()'";

                    var template =
                        '<ul ' + ctrl.classIfDefined(ctrl.$scope.options.injectClasses.ul, true) + '>' +
                            '<li ng-repeat="node in node.' + ctrl.$scope.options.nodeFolderType + ' | filter:filterExpression:filterComparator ' + ctrl.orderByFolderType + '" ' + ctrl.classIfDefined(ctrl.$scope.options.injectClasses.li, true) + ' class="folder-type">' +
                            '<i class="type-icon" ng-class="folderTypeClass(node)"></i>' +
                            '<div class="tree-label ' + ctrl.classIfDefined(ctrl.$scope.options.injectClasses.label, false) + '" tree-transclude-foldertype></div>' +
                            '</li>' +
                            '<li ng-repeat="node in node.' + ctrl.$scope.options.nodeChildren + ' | filter:filterExpression:filterComparator ' + ctrl.orderBy + '" ng-class="headClass(node)" ' + ctrl.classIfDefined(ctrl.$scope.options.injectClasses.li, true) + '>' +
                            '<i class="tree-branch-head" ng-class="iBranchClass()" ng-click="selectNodeHead(node)"></i>' +
                            '<i class="tree-leaf-head ' + ctrl.classIfDefined(ctrl.$scope.options.injectClasses.iLeaf, false) + '"></i>' +
                            '<div class="tree-label ' + ctrl.classIfDefined(ctrl.$scope.options.injectClasses.label, false) + '" ng-class="[selectedClass(), unselectableClass()]" ng-click="selectNodeLabel(node)" tree-transclude></div>' +
                            '<treeitem-foldering ng-if="nodeExpanded()"></treeitem-foldering>' +
                            '</li>' +
                            '</ul>';

                    ctrl.template = ctrl.$compile(template);

                }
            }
        });
Removed some unnecessary bindings.

you can now extend the directive, example:


        .directive("treecontrolfoldering", function() {
            return {
                restrict: "A",
                require: "treecontrolFoldering",
                link: function(scope, element, attributes, ctrl) {

                    var isolateScope = element.isolateScope();

                    ctrl.ensureDefault(element.isolateScope().options, "nodeFolderType", "FolderType");

                    isolateScope.folderTypeClass = function (node) {
                        var destinationType = scope.foldering.getDestinationObject(node);
                        return destinationType.cssClass;
                    };

                    ctrl.defaultIsLeaf = function(node) {
                        return (!node[isolateScope.options.nodeChildren] || node[isolateScope.options.nodeChildren].length === 0) &&
                            (!node[isolateScope.options.nodeFolderType] || node[isolateScope.options.nodeFolderType].length === 0);
                    }

                    isolateScope.options.isLeaf = ctrl.defaultIsLeaf;

                    ctrl.orderBy = "| orderBy:'Name'";
                    ctrl.orderByFolderType = "| orderBy:'toString()'";

                    var template =
                        '<ul ' + ctrl.classIfDefined(isolateScope.options.injectClasses.ul, true) + '>' +
                            '<li ng-repeat="node in node.' + isolateScope.options.nodeFolderType + ' | filter:filterExpression:filterComparator ' + ctrl.orderByFolderType + '" ' + ctrl.classIfDefined(isolateScope.options.injectClasses.li, true) + ' class="folder-type">' +
                            '<i class="type-icon" ng-class="folderTypeClass(node)"></i>' +
                            '<div class="tree-label ' + ctrl.classIfDefined(isolateScope.options.injectClasses.label, false) + '" tree-transclude-foldertype></div>' +
                            '</li>' +
                            '<li ng-repeat="node in node.' + isolateScope.options.nodeChildren + ' | filter:filterExpression:filterComparator ' + ctrl.orderBy + '" ng-class="headClass(node)" ' + ctrl.classIfDefined(isolateScope.options.injectClasses.li, true) + '>' +
                            '<i class="tree-branch-head" ng-class="iBranchClass()" ng-click="selectNodeHead(node)"></i>' +
                            '<i class="tree-leaf-head ' + ctrl.classIfDefined(isolateScope.options.injectClasses.iLeaf, false) + '"></i>' +
                            '<div class="tree-label ' + ctrl.classIfDefined(isolateScope.options.injectClasses.label, false) + '" ng-class="[selectedClass(), unselectableClass()]" ng-click="selectNodeLabel(node)" tree-transclude></div>' +
                            '<treeitem-foldering ng-if="nodeExpanded()"></treeitem-foldering>' +
                            '</li>' +
                            '</ul>';

                    ctrl.template = ctrl.recompileTemplate(template);
                }
            }
        });


some additional code is needed but ...
Changed the orderBy back to private as it's not needed on the controller.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant