2015-08-15 92 views
3

我想在AngularJS中创建一个使用嵌套ToDos的ToDo应用程序。作为其中的一部分,我希望能够通过点击来缩进或缩小ToDo(最终,它会对“标签”或“shift-tab”按键做出反应)。当缩进时,该函数还应缩进任何子ToDos。这是我遇到麻烦的地方。我不知道如何在指令中实现递归函数。如果任何人看到了这一点或可以提供任何帮助,我将不胜感激。我创建了一个工作的JSFiddle,它缩进了一个ToDo,但不缩进它的子节点。 JS小提琴在这里https://jsfiddle.net/t1ba50k6/16/如何在angularJS的指令中使用递归函数?

此外,请提供有关编码约定或清理指令的任何最佳做法。

谢谢!

我的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: '=' 
     } 
    }; 
}); 

回答

1

映射您的数据嵌套结构将大大简化了这一点。

总是使用相同的属性名称为孩子阵列:

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

同意。我可以使用这样的结构。但是,如何在引用孩子的指令中调用函数? – ChrisL

+0

只对孩子使用'ng-repeat'。 google'angular recursive directive'会发现很多结果 – charlietfl

0

一种解决方案是使用$broadcast(name, args)scope$on(name, listener)

cliked火灾的事件时:

scope.$broadcast('indent'); 
儿童指令

scope.$on('indent', scope.indent); 
+0

谢谢。我会尝试,并更新我的小提琴,如果它的作品。 – ChrisL