Question

我需要在使用AngularJS开发的webapp中呈现类别列表。

每个类别都可以包含subcategories数组。

为了渲染它们，我创建了一个递归category指令，其作用如下：

如果类别没有子类别，则渲染为完整类别。
如果类别具有子类别，则将超类别渲染为子类别的容器，并插入并编译子类别。

这是指令的代码：

.directive('category', 
  function(WeeklyCalendar, categoryRowsFactory, $compile){
    return {
      replace: true,
      restrict: 'A',
      templateUrl: 'new-category-tpl',
      scope: {
        category: '=categoryData'
      },
      link: function (scope, elem, attrs) {
        //recursive categories rendering
        if(scope.category.subcategories) {
          $compile('<div ng-repeat="sub in category.subcategories track by sub.id" category category-data="sub"></div>')
          (scope, function(cloned, scope){ elem.append(cloned) })
        }

        /* This works */
        //elem.append('aaa');

        /* This doesn't */
        elem.find('.content').append('aaa');
      }
    };
})

到目前为止，一切运作良好，您可以在此处查看结果：codepen

因此，每个类别的category-row都分为header和content，如下所示：

<div class="category">
    <div class="category-row">
        <div class="header"></div>
        <div class="content"></div>
    </div>
</div>

现在，我需要在content函数中使用类link向div添加一些HTML。无论如何，使用经典element.find('.content').append('string')赢得的工作，因为find不会返回任何结果。（即使包含jQuery ）。奇怪的是，因为如果你检查HTML，你会发现每个类别都有一个category-row个孩子，其中包含一个.content div。只需附加element即可，但这对我来说还不够。

顺便说一下，这是category：

的模板

  <script type="text/ng-template" id="new-category-tpl">
    <div ng-class="{'category multicategory': category.subcategories, 'category single': category.type == 'Single', 'subcategory': category.type == 'Subcategory'}">
      <div ng-if="category.subcategories" class="supercategory">
        <strong>{{category.name}}</strong>
      </div>
      <div ng-if="category.type != 'WithSub'" class="category-row">
        <div class="header">{{category.name}}</div>
        <div class="content"></div>
      </div>
    </div>   
  </script>

就我所见，没什么特别的。

我浪费了整整一个下午，试图了解我失踪了什么，没有成功。也许你会更聪明/更幸运。那么，有没有人知道为什么element.find(..)在link函数中不起作用？

更新

ExpertSystem的解决方案可以解决问题。我可以在append电话中$timeout，那部分没问题。但是后来我需要访问我在指令控制器中附加的相同元素，但模板仍然是未编译的，并且它不起作用。

也许我使用了错误的方法。这就是我想要实现的目标：

我需要在日历中显示类别;
这些类别有三种类型：
- 单个类别，它们只有一行显示事件;
- 多个类别，它们有很多行，我在其中显示事件;
- 带子类别的类别，每个子类别都有一行。
该类别的每一行都有空的占位符单元格，没有事件的日期;
我创建了一个递归模板，用于将类别呈现为子类别的容器，或者创建一个由.header组成的行，其类别名称为.content; .content只是模板中的空div。
我的想法是，由于空占位符单元不必与任何数据绑定，我可以通过jQuery将它们插入link函数中（因为我必须检查多少个必须插入它们，具体取决于日历的大小;我还需要检查是否必须只附加一行单元格或多行，具体取决于类别的类型。）
这些单元格可用于稍后放置事件：事件将向cateogory控制器询问右侧单元格的位置，并通过elem.css或{将自身置于相同位置{1}}。

如果ng-style无法访问，则无法进行此操作，因为我必须放置具有绝对定位的事件，我需要知道element和top。我这是我最终试图实现的简短版本：

left

我没有想法。有人能想出更好的方法来实现我所描述的目标吗？

Answer 1

＆＃34;问题＆＃34;是ngIf（在其他指令中）从DOM中删除模板并决定在以后追加什么/何时追加（在几个$ digest循环之后）。

因此，在您尝试访问.content时，元素的innerHTML如下所示：

<!-- ngIf: category.subcategories -->
<!-- ngIf: category.type!=='WithSub' -->

最安全的＆＃34;访问.content一旦呈现就是将您的代码包装成$timeout回调：

$timeout(function () {
    elem.find('.content').text('aaa');
});

另请参阅此 short demo 。

手动$ compile后如何执行模板操作？

更新

1 个答案: