When the directive manually replaces the element's content, ngRepeat fails to remove the old entries

Question

When the directive manually replaces the element's content, ngRepeat fails to remove the old entries

I created a directive that utilizes different templates based on the state of the scope as shown below:

app.directive('foo', function($compile) {
  return {
    restrict: 'E',
    scope: {
      bar: '='
    },
    link: function(scope, element) {
      var tpl = scope.bar == 'foo' ? '<li><strong>{{bar}}</strong</li>' : '<li>{{bar}}</li>'
      element.replaceWith($compile(element.html(tpl).contents())(scope))
    }
  }
});

When using this directive within an ngRepeat loop and the array being used changes, the new elements get rendered but the old ones remain visible.

<ul>
  <foo bar="bar" ng-repeat="bar in bars"></foo>
</ul>

Check out the live demo here: http://plnkr.co/edit/UnsrjPh8kW27bK8RbPgY

Could someone please advise me on what I might be doing wrong?

javascript angularjs angularjs-directive angularjs-ng-repeat

Answer 1

Answer №1

The reason for this occurrence is that ng-repeat and directive each create their own scope. Give it a try by using the directive inside the ng-repeat, as it has worked successfully for me.

Here is the HTML code snippet:

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p><button ng-click="changeBars()">Change bars</button></p>
    <ul>
      <li ng-repeat="bar in bars"><foo bar="bar">{{bar}}</foo></li>
    </ul>
  </body>

And here is the directive script:

app.directive('foo', function($compile) {
  return {
    restrict: 'E',
    scope: {
      bar: '='
    },
    link: function(scope, element) {
      var tpl = scope.bar == 'foo' ? '<p><strong>{{bar}}</strong</p>' : '<p>{{bar}}</p>'
      element.replaceWith($compile(element.html(tpl).contents())(scope))
    }
  }
});

You can find a working example at this link.

Answer 2

The reason for this occurrence is that ng-repeat and directive each create their own scope. Give it a try by using the directive inside the ng-repeat, as it has worked successfully for me.

Here is the HTML code snippet:

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p><button ng-click="changeBars()">Change bars</button></p>
    <ul>
      <li ng-repeat="bar in bars"><foo bar="bar">{{bar}}</foo></li>
    </ul>
  </body>

And here is the directive script:

app.directive('foo', function($compile) {
  return {
    restrict: 'E',
    scope: {
      bar: '='
    },
    link: function(scope, element) {
      var tpl = scope.bar == 'foo' ? '<p><strong>{{bar}}</strong</p>' : '<p>{{bar}}</p>'
      element.replaceWith($compile(element.html(tpl).contents())(scope))
    }
  }
});

You can find a working example at this link.

When the directive manually replaces the element's content, ngRepeat fails to remove the old entries

Answer №1

Similar questions

Utilizing jQuery functions within Vue components in Quasar Framework

Preventing autoscrolling in Ionic's dual side menu template when additional content is added

Developing web applications using AngularJS and Web API allows for customization of error handling by utilizing

Executing Javascript in a Bootstrap 4 modal using Rails

Having trouble injecting HttpClient in a hybrid AngularJS/Angular app that has been upgraded with ngUpgrade? You may come across the error message "NullInjectorError: No provider for http_HttpClient!"

What is the best way to set the active class on the initial tab that is determined dynamically rather than a static tab in Angular?

Convert a prop into a data attribute using Vue.js 2

"Exploring the synergy of NodeJS: incorporating callbacks within promises

Ajax transmits an array of data to the server

A method for determining a running total from an array object in JavaScript/Typescript and presenting the result at each step using HTML

Modify the index in the creation of a json

Exploring the Power of ng-class with Multiple Conditions in AngularJS

Set focus on Bootstrap modal when closing the popup near the input field within the body

"Return to previous view with the zoom back feature in CanvasJS

"Nested AngularJS controllers: a deep dive into the world

Flask's JSON data format

Create a reusable React widget in a JavaScript file and integrate it into an ASP.NET MVC project

Is there a way to iterate through objects and add new properties to them?

What could be causing the repetition of the same cookie in my request header when using jQuery ajax?

Error: The 'in' operator cannot be utilized to search for 'length' in the Kendo UI framework