Angular指令删除只调用一次的DOM元素

Angular Directive to delete a DOM element only called once

本文关键字：一次 DOM 元素 删除 指令 调用 Angular      更新时间：2024-03-20

我希望能够删除模态中的一行。也可以添加新的。

我有一个精简的模板如下：

<div class="filter-row" delete-filter>
    <div class="form-group>
        <div class="delete-filter" ng-click="deleteFilter()"><i class="fa fa-trash"></i></div>
    </div>
</div>

指令如下：

.directive('deleteFilter', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            // Scope function to delete a filter row from the DOM
            scope.deleteFilter = function() {
                console.log("Deleting");
                // Remove the directive element
                element.remove();
            };
        }
    };
});

这似乎可以很好地删除单个筛选器行。但是，如果在已有行的情况下从此模板中添加新行，我只能删除其中一行。如果我添加了许多行并想要删除，我仍然只能删除一行。

注意：每次单击删除行时，无论该行是否被删除，函数中的控制台日志都会触发。

如有任何帮助，我们将不胜感激。我想我错过了什么，但我不知道是什么。

编辑：

控制器添加了一个具有此功能的新过滤器：

// Function to add a new filter row in the filter modal window
self.addFilterRow = function() {
    var newFilterRow = $compile("<filter-row></filter-row>")($scope);
    $("#filterForm").append(newFilterRow);
};

这是一个Plunkr，可以更好地描述我遇到的问题：

https://plnkr.co/edit/H5fvWmDLmOcnADlxELOo?p=preview

    <h3>Repeat stuff:</h3>
<div ng-app='app' ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="(country,goals) in items">{{country}}: {{goals}}
      <div class="filter-row" delete-filter>
        <div class="form-group>
        <div class=" delete-filter " ng-click="deleteFilter() "><input type='button' value='delete'></div>
    </div>
</div>
        </li>
    </ul>
</div>

js代码是

var items = {
  "India": "2",
  "England": "2",
  "Brazil": "3",
  "UK": "1",
  "USA": "3",
  "Syria": "2"
};
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
  $scope.items = items;
});
app.directive('deleteFilter', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      // Scope function to delete a filter row from the DOM
      scope.deleteFilter = function() {
        console.log("Deleting");
        // Remove the directive element
        element.remove();
      };
    }
  };
});

请找到你的问题：

http://jsfiddle.net/RkykR/2326/

希望它也对你有用。：）

如果我已经理解了您的问题，那么继承的作用域应该可以为您解决这个问题。将scope: true添加到指令中，例如：

.directive('deleteFilter', function() {
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element) {
            // Scope function to delete a filter row from the DOM
            scope.deleteFilter = function() {
                console.log("Deleting");
                // Remove the directive element
                element.remove();
            };
        }
    }; });

若要解决问题，请将filterRow指令的作用域设置为true。

app.directive('filterRow', function() {
        return {
            scope: true,
            replace: true,
            restrict: 'E',
            templateUrl: 'filter-row.html',
        };
});
app.directive('deleteFilter', function() {
        return {
            restrict: 'A',
            scope: true,
            link: function(scope, element) {
                // Scope function to delete a filter row from the DOM
                scope.deleteFilter = function() {
                    console.log("Deleting",element);
                    // Remove the directive element
                    element.remove();
                };
            }
        };
});

基本上将其设置为true将允许它创建该行的新实例。当设置为false时，该行将只有一个实例，每次单击删除时，它都会删除最后一个创建的行。

使用继承的作用域。

.directive('deleteFilter', function() {
    return {
        restrict: 'A',
        //Use inherited scope
        scope: true,
        link: function(scope, element) {
            // Scope function to delete a filter row from the DOM
            scope.deleteFilter = function() {
                console.log("Deleting");
                // Remove the directive element
                element.remove();
            };
        }
    }; 
});

这样，ng-click="deleteFilter()"将在deleteFilter指令创建的作用域上调用。

更新

还要删除filterRow指令中的replace: true。

app.directive('filterRow', function() {
        return {
            scope: false,
            //REMOVE this 
            //replace: true,
            restrict: 'E',
            templateUrl: 'filter-row.html',
        };
});

对于同级指令上的replace: true，deleteFilter指令上继承的作用域将被删除。

replace:true已弃用1

来自文档：

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

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

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

--AngularJS综合指令API

来自GitHub:

Caitp——它被弃用，因为replace: true存在已知的、非常愚蠢的问题，其中许多问题无法以合理的方式真正解决。如果你很小心，避免了这些问题，那么你就会有更多的权力，但为了新用户的利益，更容易告诉他们"这会让你头疼的，不要这样做；。

--AngularJS问题#7636

相关文章：