Question

我想在ng-repeat结束后加载我的JavaScript类。

AngularJS版本：1.6.4

我的JavaScript类：

+(function($) {
  'use strict';
  document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('[data-dialog="true"]');
    console.log(buttons.length); // return 0
  });
});

我的AngularJS视图：

<tr ng-repeat="item in filteredItems">
  <td>{{item.title}}</td>
  <td>
    <a href="/page/duplic/{{item.id}}" data-dialog="true"
       data-dialog-action-title="duplic item">file_copy</a>
  </td>
</tr>

问题：：我的JS类已在AngularJS渲染之前加载，并且console.log()不返回任何元素。

Answer 1

使用自定义指令插入代码：

app.directive("dialog",function() {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        var button = elem;
        console.log(attrs.dialogActionTitle);
        if (attr.dialog == "true") {
          //script here
        };
    }
})

在postLink指令将元素附加到DOM之后，$ compile服务将调用ng-repeat函数。

有关更多信息，请参见

AngularJS Developer Guide - Creating Custom Directives

Answer 2

ng-repeat完成时没有事件。但是angularJS创建了以下属性：

$first: true
$last: false
$middle: false
$even: true
$odd: false

您可以使用$last和以下自定义指令对其进行检查：

HTML

<div ng-repeat="item in filteredItems" isitthelastone>
    {{item.name}}
</div>

APP.JS

.directive('isitthelastone', function() {
  return function(scope, element, attrs) {

    if (scope.$last){
      alert('event triggered');
    }

  };
})

用AngularJS等待ng-repeat结束

2 个答案: