Combining one-time binding, bi-directional binding in directives, and ng-repeat to create dynamic data rendering

Imagine we have a directive named 'foo' with the following configuration:

app.directive('foo', function() {
  return {
    restrict: 'E',
    scope: { prop: '=' },
    template: '<h1>{{prop}}</h1>'
  };
});

According to Angular's documentation, it is possible to combine one-time binding with two-way binding like this:

<foo prop="::someProperty"></foo>

This setup effectively results in the 'foo' directive not being updated if the value of 'someProperty' changes later on.

Now, let's consider the following code snippet:

<foo ng-repeat="item in items" prop="::item"></foo>

In this scenario, if 'item' gets modified at a later point, the 'foo' directive will be informed, as if there was a regular binding in place. The '::' doesn't seem to have any significant impact (I verified that it prevents an unnecessary watch from being established). To illustrate both cases, I put together this plunker.

My inquiry is: does this behavior adhere to expectations? It appears inconsistent between the two situations.

Answer №1

Indeed, it seems that in the scenario you described, the correct behavior is for a new instance of the template to be created when an item within items changes, while the old instance is simply removed. As illustrated by your example, the creation of a new foo element results in a new value for the prop attribute. This mechanism is explained in the Angular ngRepeat documentation:

When modifications occur in the collection, ngRepeat adjusts the DOM correspondingly:

  • If an item is added, a fresh template instance is incorporated into the DOM.
  • If an item is removed, its existing template instance is eliminated from the DOM.
  • In scenarios where items are reordered, their respective templates are likewise rearranged in the DOM.

The documentation doesn't explicitly specify what happens during updates. However, it appears that the process involves replacing the previous instance with the new one, rather than updating it directly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimal structure for AngularJS applications

Seeking guidance on best practices for services, controllers, and directives in AngularJS 1.3.X. Some key things I have observed: - The HTML view only interacts with the main controller and its scope - Directives should not have their own services ...

When transferring files to Azure Blob Storage in segments using a SAS URL, I encountered a 403 error

Using Python, I am generating a SAS URL. An example of a generated SAS URL is: https://testvideos.blob.core.windows.net/testvideos/user_125/video_125/test.mp4?se=2023-05-14T11%3A02%3A59Z&sp=rc&sv=2022-11-02&sr=b&sig=7o8tNK508ekXy9JpahWBsfdf ...

utilize dynamic variables in post-css with javascript

Question: Is it possible to dynamically set or change variables from JavaScript in post-css? I have a react component with CSS3 animations, and I want to set dynamic delays for each animation individually within each component. I've found a similar s ...

Monitoring the actions that occur when my button is clicked using Firefox and Javascript

Whenever I click on a few new buttons that I've recently added, something weird is happening. The buttons are functioning correctly, but they keep scrolling the page back to the top. I suspect that there might be some interference from another part of ...

Leveraging the power of Ajax in JavaScript

For my assignment, I successfully made two separate paragraphs hide and show using jQuery. Moving forward, the next step involves integrating JavaScript Ajax code to allow the paragraphs to toggle visibility. To achieve this, I created two distinct HTML fi ...

Add another condition to the current JavaScript rule

http://jsfiddle.net/e8B9j/2/ HTML <div class="box" style="width:700px">This is a sentence</div> <div class="box" style="width:600px">This is a sentence</div> <div class="box" style="width:500px">This is a sentence</div> ...

Retrieve the initial data of the AngularJS model upon button click

Previously, I was able to retrieve the initial values of the model using this.model.changed or this.model._previousAttributes in BackboneJS. Now, I am looking to achieve the same functionality in AngularJS, where I can track all changes made to the model ...

Utilizing Node.js with Redis for organizing data efficiently

Currently, I am in the process of configuring a Redis cache system for storing incoming JSON data in a specific format. My goal is to create an ordered list structure to accommodate the large volume of data that will be stored before eventual deletion. Th ...

An alternative way to adjust font size without having control over the HTML code

Is there a way to adjust the font size in a web page when only the div or iFrame is editable, not the actual HTML content? Our website allows users to upload their own ebooks, resulting in uncontrolled and complex HTML content for each chapter. We want to ...

having difficulty implementing a horizontal scrollbar on my chart

Currently, I am in the process of utilizing angularjs google charts for my project. Specifically, I have integrated an angularjs google column chart to visually represent data using columns. However, a recurring issue arises when there is an abundance of d ...

Alert: Parser error in JSONP!

$.ajax({ type: "GET", dataType: "jsonp", jsonpCallback: "jsoncallback", //async: true , data: { // some other data here }, url: "http://mywebsite.com/getRequest.php", success: function(response ...

Triggering Leaflet's Mouseout function during a MouseOver event

I am working on a leaflet map project where I am dynamically adding markers. One of my goals is to have the marker's popup appear not only when clicked, but also when the user hovers over it. This is the code snippet I have been using: function mak ...

Avoid nesting subscriptions in Rxjs

I am working with an array of objects and I need to extract an array of IDs from it. After that, I have to make calls to 2 different APIs before closing the modal window. Below is my code snippet: from(this.alerts) .pipe(map(alert => alert._id)) ...

Applying jQuery to deactivate blank categories within a sorted directory

I'm in the early stages of learning Javascript/jQuery. I have a list of items (specifically, course offerings) arranged in a UL. Each "course" is represented by an LI element. The list is filtered by categories using jQuery, which controls the visibil ...

What is the best way to implement buttons dynamically in multiple divs created by Django using JavaScript loops?

I have been working on a Django project where I've created several HTML divs. My goal is to add a single button to each div. https://i.sstatic.net/DEIqL.png In the image provided, you can see a div with the class card-footer that I created using a Dj ...

Button for PayPal Checkout

I am currently working on setting up a functional Paypal button for a personal e-commerce website. Everything runs smoothly in my sandbox testing environment, processing payments and returns without any issues. However, when I switch the client ID to the ...

What if there was a magical jQuery method that could automatically trigger a callback function? What could it possibly be named?

Is there a way to load only images and iframes, similar to the .load() function? I want to automatically add a selector element into the "this" variable for this purpose. $('document').ready(function({ $('a').<Something to trigg ...

Tips for efficiently displaying a computed property on a template using Vuetify?

I am attempting to display only the initials of a user who is logged in while inside a store. Here is my template: <v-menu v-if="this.$store.getters.getLoggedUser"> <template v-slot:activator="{ on, attrs, userInitials }&quo ...

Leveraging JSON Array in HTML with Ionic 2

I am encountering difficulty extracting information from an array of JSON objects called 'books' for use in my HTML. The structure of the array is as follows: https://i.sstatic.net/25aqG.png Each object follows this format: https://i.sstatic. ...

Converting MultiSelect Array from JavaScript to MySQL

I recently implemented a multiselect feature on the client side: <select name="country" data-placeholder="Choose a Country..." tabindex="2"> <option name="country" value="United States">United States</option> & ...