Question

好的，我正在尝试使用AngularJS创建类别浏览器，例如eBay。

我有根类别：

<div id='root'>
    <ul>
        <li data-ng-repeat='category in categories'>
            <a href='#'
                data-ng-bind='category.Name'  
                data-ng-click='browseCategories(category, "children-1")'>
            </a>
         </li>
    </ul>
</div>

<div id='children-1'>
</div>

<div id='children-2'>
</div>

browseCategories方法的目的是用所选类别的子项填充children-1 div。

$scope.browseCategories = function(category, moveTo) {

    //looping in order to create a new <ul> of children categories.
    var html = "<ul class='unstyled'>";
    for (var I = 0; I < category.Children.length; ++I) {
        var category = category.Children[I];
        html += "<li><a href='#' data-ng-click='browseCategories(" + 
            category + ", 'children-1')'>" + category.Name + "</a>";
    }
    html += "</ul>";

    var elMoveTo = angular.element(moveTo);
    $(elMoveTo).html(html);
}

嗯，新的<ul>已正确附加到元素，但browseCategories方法停止工作。发生了什么事？

全部谢谢

Answer 1

尝试这种递归重复

How can I make recursive templates in AngularJS when using nested objects?

您的浏览类别功能可以在点击时加载子列表。

Answer 2

在for循环中，您创建了var category，它已经是变量

$scope.browseCategories = function(category, moveTo) {

    //looping in order to create a new <ul> of children categories.
    var html = "<ul class='unstyled'>";
    for (var I = 0; I < category.Children.length; ++I) {
        var category = category.Children[I];
            ^^^^^^^^

尝试重命名并查看。

这可能会做你想要达到的目标。希望有所帮助。

但是当你以角度方式进行时，最好的做法是避免像jQuery这样的任何其他库并尝试以角度方式实现它。 Angular非常强大。

请参阅此SO帖子："Thinking in AngularJS" if I have a jQuery background?

Answer 3

正如我在评论中提到的，您需要使用$ compile服务将原始HTML“编译”为Angular理解的内容。我做了Plunker来说明这一点。我对代码进行了一些更改，并对$scope.categories数组的外观做了一些假设。希望我不会偏离基础。

link: function(scope, element) {

  scope.browseCategories = function(category, moveTo) {

    console.log("category", category);
    scope.c = category;

    //looping in order to create a new <ul> of children categories.
    var html = "<ul class='unstyled'>";
    for (var I = 0; I < category.Children.length; ++I) {
      var c = category.Children[I];
      html += "<li><a href='#' data-ng-click=\"browseCategories(c, 'children-3')\">" + category.Name + "</a>";
    }
    html += "</ul>";

    var link = $compile(html);
    var content = link(scope);
    $("#" + moveTo).html(content);
  }
},

因此，在使用$compile服务之前，您需要将category数组绑定到scope，以便Angular知道在绘制后传递到browseCategories的内容通过$("#" + moveTo).html(content);再次进入屏幕。

 html += "<li><a href='#' data-ng-click=\"browseCategories(c, 'children-3')\">" + category.Name + "</a>";

注意variable c正在传递

一般来说，正如@Raghav所提到的，您希望避免使用这样的技术，而不是依赖第三方库并使用$compile服务来处理原始HTML。

希望这可以帮助您实现您正在努力的目标。

编辑：我更新了我的Plunker，以获得子div的正确ID值，以更好地说明功能

AngularJS - ng-click不适用于子元素

3 个答案: