Question

我想在AngularJS中创建一个使用嵌套ToDos的ToDo应用。作为其中的一部分，我希望能够通过点击缩进或突出ToDo（最终，它会对＆＃39;标签＆＃39;或者＆＃39; shift-tab＆＃39;按键做出反应）。缩进时，该函数还应缩进任何子ToDos。这是我遇到麻烦的地方。我不确定如何在指令中实现递归函数。如果有人看到这样做或可以提供任何帮助，我将不胜感激。我创建了一个有效的JSFiddle，它缩进了一个ToDo，但没有缩进它的孩子。 JS Fiddle在这里https://jsfiddle.net/t1ba50k6/16/

另外，请提供有关编码惯例的最佳实践或清理指令。

谢谢！

我的HTML：

<ul id=Todos ng-app="app" ng-controller="todos">
    <div ng-repeat='todo in model' ng-init="todoIndex = $index">
       <todo-item content="todo"></todo-item>
    </div>

我的javascript：

var app = angular.module('app', []);

app.controller("todos", function ($scope) {

    $scope.model = [{
        "title": "Task item one",
            "indentLevel": 1
    }, {
        "title": "Task item two",
            "indentLevel": 2
    }, {
        "title": "Task item three",
            "indentLevel": 2
    }];

});


app.directive('todoItem', function ($compile) {

    var getTemplate = function (content) {
        var startStr = '';
        var endStr = '';

        if (content.indentLevel == 1) {
            startStr = '<li class="todolist"><table><tr><td><div class="checkboxpadding"><img width="16" height="16" class="checkbox"></div></td><td><div ng-click="indent()">';
            endStr = '</div></td></tr></table></li>';

            return startStr + content.title + endStr;
        } else if (content.indentLevel == 2) {

            startStr = '<li class="todolist indent_2""><table><tr><td><div class="checkboxpadding"><img width="16" height="16" class="checkbox"></div></td><td><div ng-click="indent()">';
            endStr = '</div></td></tr></table></li>';
            return startStr + content.title + endStr;
        }


    };

    var linker = function (scope, element, attrs) {

        element.html(getTemplate(scope.content)).show();
        $compile(element.contents())(scope);


        scope.indent = function () {
            var childElem = angular.element(element.children()[0]);

            if (scope.content.indentLevel < 3) {
                childElem.removeClass("indent_" + scope.content.indentLevel);
                childElem.addClass("indent_" + (scope.content.indentLevel + 1));
                scope.content.indentLevel++;
                // update Database
                // indent child nodes?
                // for (var i=0; i < nodes; i++) {                      }

            }
        };


    };

    return {
        restrict: "E",
        link: linker,
        scope: {
            content: '='
        }
    };
});

Answer 1

将数据映射到嵌套结构将大大简化这一过程。

始终对子数组使用相同的属性名称：

$scope.model = [{
        "title": "Task item one",
        "indentLevel": 1,
        "children": [
            {
              "title": "Task item two",
              "indentLevel": 2,
               "children":[]
            }, {
               "title": "Task item three",
               "indentLevel": 2,
                "children":[]
            }
        ]
}];

如何在angularJS中的指令中使用递归函数？

1 个答案: