Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made it a bit more extensible and reusable #149

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

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);
            }
        }
    });

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.

None yet

1 participant