Angular Directive to delete a DOM element only called once

Question

I have a row in a modal that I want to be able to delete. New ones can also be added.

I have a trimmed down template as follows:

<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>

And a directive as follows:

.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();
            };
        }
    };
});

This seems to work well to delete a single filter row. But if a new row is added from this template while a row already exists, I can only delete one of the rows. If I add many rows and want to delete, I can still only delete a single row.

To note: the console log within the function will fire every time a delete row is clicked, whether the row is removed or not.

Any help would be appreciated. I think I am missing something but I can't figure out what.

Edit:

A new filter is added with this function from the controller:

// 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);
};

Here is a Plunkr that may better describe the issue I'm having:

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

Answer 1

If I've understood your question, inherited scope should solve this for you. Add scope: true to the directive, for example:

.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();
            };
        }
    }; });

Answer 2

    <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>

and the js code is

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();
      };
    }
  };
});

please find the working fiddle to you problem :

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

hope it works for you also.. :)

Answer 3

Use inherited scope.

.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();
            };
        }
    }; 
});

With that, the ng-click="deleteFilter()" will be invoked on the scope created by the deleteFilter directive.

---

UPDATE

Also remove replace: true in the filterRow directive.

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

With replace: true on a sibling directive, the inherited scope on the deleteFilter directive was getting removed.

replace:true is Deprecated¹

From the Docs:

replace ([DEPRECATED!], will be removed in next major release - i.e. v2.0)

specify what the template should replace. Defaults to false.

• true - the template will replace the directive's element.
• false - the template will replace the contents of the directive's element.

-- AngularJS Comprehensive Directive API

From GitHub:

Caitp-- It's deprecated because there are known, very silly problems with replace: true, a number of which can't really be fixed in a reasonable fashion. If you're careful and avoid these problems, then more power to you, but for the benefit of new users, it's easier to just tell them "this will give you a headache, don't do it".

-- AngularJS Issue #7636

Answer 4

To fix your problem, set your filterRow directive's scope to 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();
                };
            }
        };
});

Basically setting it to true will allow it to create a new instance of the row. When set to false, there will be only one instance of the row and everytime you click on delete, it will remove the last row that was created.