Question

我有一个AngularJS指令，用于与从服务器推送的通知进行交互。我遇到的问题是，目前我使用的方法是使用ng-repeat跟踪会话期间的所有通知，然后在添加到阵列时显示它们。我想要发生的是，一个警报来了，它被添加到DOM，它会停留几秒钟，并从DOM中移除自己。此时问题是该元素将隐藏，但它不会从DOM中移除它自己。因为元素是绝对定位的，在淡出之后阻止我访问它在前面的项目。我假设element.remove()和element.$destroy()可以做到这一点，但似乎元素不是来自ng-repeat，或者可能是指令的$scope不是被删除。任何帮助将不胜感激。

angular.module('bmuApp').directive('messageNoti', function($timeout){
  return {
    scope: {
      alert: '=messageNoti'
    },
    replace: true,
    restrict: 'EA',
    templateUrl: 'partials/authenticated/homepage/alerts.html',
    link: function(scope, element, attrs) {
         $timeout(function(){
            element.addClass('fadeOut');
            $timeout(function(){
              element.remove();
            }, 500);
         }, 5000);

        element.on('$destroy', function () {
          scope.$destroy();
        });
       }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!------------>
<!-- Alerts -->
<!------------>

    <div class="alert-container" ng-cloak>
      <a class="alert animated fadeInUp" ng-repeat="alert in alerts" ng-href="messages/{{ alert.user.thread_id }}" message-noti="alert">
      </a>
    </div>

<!-----Template for Alert------>

    <div class="row">
      <span class="close">
        <i class="glyphicon glyphicon-remove"></i>
      </span>
      <div class="col-xs-12 text-left">
        <span class="profile-image" style="background-image:url('https://www.blackmarketu.com/{{ ::alert.user['profile-picture'] }}');"></span>
        <h5> {{ ::alert.user["user-firstname"] }}&nbsp;{{ ::alert.user["user-lastname"] }} </h5>
        <p>{{ ::alert.message }}</p>
      </div>
    </div>

Answer 1

您无需直接与DOM交互即可将其删除。只需从数组中拼接（删除）该数组成员。

所以你的逻辑有点不对，因为你有一系列警报而你没有删除它们，你只想删除DOM元素。

如果您不想过多地更改代码并添加父指令来处理此问题，则可以将“alert”（当前数组成员）和“alert”（整个警报数组）传递给指令，然后在你的超时回调而不是删除DOM元素，你从数组中拼接该数组成员。

Answer 2

删除replace: true。由于ng-repeat指令创建了继承的范围，并且您的指令创建了 isolate 范围，因此它们在同一元素上不能很好地协同工作。

来自文档：

replace（[已弃用！]，将在下一个主要版本中删除 - 即v2.0）

指定模板应替换的内容。默认为false。


true - 模板将替换指令的元素。

false - 模板将替换指令元素的内容。

- AngularJS Comprehensive Directive API

来自GitHub：

Caitp--它已被弃用，因为replace: true存在已知的非常愚蠢的问题，其中一些问题无法以合理的方式得到解决。如果你小心并避免这些问题，那么对你有更大的帮助，但为了新用户的利益，更容易告诉他们“这会让你头痛，不要这样做。”

- AngularJS Issue #7636

放置在ng-repeat上的Angular Directive未从ng-repeat中删除

2 个答案: