Javascript ng repeat with directive：数组更改后如何销毁重复项？

我有一个angular js应用程序，它使用ng repeat和如下指令：

<div data-ng-repeat="n in items">
   <div data-my-directive
        item="n"></div>
</div>

这将显示所有警报，甚至页面上不再显示的指令。 这带来了一些问题。我是否可以在数组更改或类似更改时销毁repeat中的指令，以确保不再存在（或不再显示在页面上）的指令中不执行任何逻辑？ 或者你对如何最好地实现这一点有其他想法吗

---

理想情况下，指令应该在ng repeat自身反弹后立即消失，因此一旦数据从服务器返回，就不会执行任何逻辑

当用户更改参数时，您可以取消正在运行的请求并启动新的请求

您可以找到此操作的详细说明

使用将调用的方法开始创建服务或工厂：

var getData = function(){
    var canceller = $q.defer();

    var cancel = function(reason){
        canceller.resolve(reason);
    };

    var promise =
        $http.get(service.url + '/filters', { timeout: canceller.promise})
            .then(function(response){
               return response.data;
            });

    return {
        promise: promise,
        cancel: cancel
    };
};

然后你这样称呼它：

var request = service.getData();
$scope.requests.push(request);
request.promise.then(function(movie){
    $scope.movies.push(movie);
    clearRequest(request);
}, function(reason){
    console.log(reason);
});

然后，您将提供一个取消请求的方法：

$scope.cancel = function(){
    var request = // retrieve the correct request from the requests array        
    request.cancel("User cancelled");
    // Remove the request from the array
};

---

所以我对你的问题有一些想法

首先您可以使用ng-Clope，它用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示角度html模板。如果我想让用户等到所有数据返回后再查看页面，我发现这非常有用。前

<div id="template1" ng-cloak>{{ 'hello' }}</div>

---

指令需要使用

$destroy

事件来取消正在进行的操作

app.directive("myDirective", function() {
    return {
        controller: function($scope, $http, $q) {
            var canceller = $q.defer();
            var cancel = function(reason){
                canceller.resolve(reason);
            };

            $http.get(url, { timeout: canceller.promise})
               .then(function(response){
                   $scope.data = response.data;
               });

           $scope.$on('$destroy', function () {
               cancel("Scope destroyed");
           });
       }
    }
});

当

ng repeat

删除一个项目时，它会破坏该项目的范围。使用

$destroy

事件取消正在进行的异步操作

app.directive("myDirective", function() {
    return {
        controller: function($scope, $http, $q) {
            var canceller = $q.defer();
            var cancel = function(reason){
                canceller.resolve(reason);
            };

            $http.get(url, { timeout: canceller.promise})
               .then(function(response){
                   $scope.data = response.data;
               });

           $scope.$on('$destroy', function () {
               cancel("Scope destroyed");
           });
       }
    }
});

从文档中：

$destroy（）

方法通常由指令（如

ngRepeat

）用于管理循环的展开

在销毁作用域之前，将在此作用域上广播一个

$destroy

事件。应用程序代码可以注册一个

$destroy

事件处理程序，使其有机会执行任何必要的清理

---

--

我会锁定屏幕，直到指令完成其服务器端作业，避免用户在完全同意的情况下更改参数，但不幸的是，客户端认为这不是一个选项。很多用户不小心选择了错误的选项，然后很快切换到另一个。我喜欢这样，但这似乎并没有阻止承诺的解决。我添加了一个console.log语句，以确保在正确的时间触发request.cancel（），但之后我仍然在“then”中命中了断点。有什么想法吗？我不知道，因为我没有看到你的代码，请用你正在使用的代码更新你的问题。这是因为在我们的系统中，对服务器的请求排队（出于各种原因）。显然，取消尚未发送到服务器的请求不会产生任何效果，因为它将在之后被发送。如果尚未发送，则将其从队列中删除。只是出于好奇，你为什么要排队请求？出于性能原因？你是怎么做到的？您使用的是某种角度总线吗？我们不久前注意到，我们的实体框架设置似乎很难处理并发请求（无论是对同一个表，还是对其他表，都无所谓）。确保请求排队后，应用程序的运行速度大大加快。为了将其排队，我们创建了一个拦截器，如下所述：。请注意，在其他应用程序上，我们没有注意到这种性能优势，因此我们认为这个项目的配置（或数据库）有问题，但我们无法确定它是什么。

app.directive("myDirective", function() {
    return {
        controller: function($scope, $http, $q) {
            var canceller = $q.defer();
            var cancel = function(reason){
                canceller.resolve(reason);
            };

            $http.get(url, { timeout: canceller.promise})
               .then(function(response){
                   $scope.data = response.data;
               });

           $scope.$on('$destroy', function () {
               cancel("Scope destroyed");
           });
       }
    }
});