AngularJs does not properly update the scope of a scoped directive when using ng-repeat within itself

The issue arises from calling Directive1 within the same Directive1 using ng-repeat. Although directive11 has a value in scope, when calling the nested directive with a new value, it appears to retain the initial value.

I attempted to invoke the same directive inside an ng-repeat of the directive

In the HTML code:

<accordion close-others="true">
    <node function="functionCtrller(item)"
          ng-repeat="item in list"
          ng-model="item">
    </node>
</accordion>

Within my directive definition:

myApp.directive('node', function($compile) {
return {
    restrict : 'E',
    terminal : true,
    scope : {
      node : '=ngModel',            
      function: '&function'
    },
    link : function($scope, $element) {
      if (angular.isArray($scope.node.children) && $scope.node.children.length > 0) {    
        $element.append('<accordion close-others="true"><node function="function(item)" ng-repeat="item in node.children" ng-model="item"></node></accordion>');
      }else{
      //....
      }    
      $compile($element.contents())($scope);
    } //end_link_directive
}; //end_return_directive

No errors are thrown, only that the subsequent invocation of the function fails to capture the new item from the ng-repeat.

Answer №1

Here is a helpful link that explains how to achieve what you're attempting:

To summarize:

<!-- Passing in the function along with the outer item object -->
<node function="functionController(item)" ...> 

Inside, you should do:

<!-- Inner node passing the function which was passed -->
<node function="function(item)" ...>

However, this setup only calls the outer function without passing down the necessary information through the directive scope function. What you really want is something like this, where the inner directive understands what parameters it needs:

<!-- Please call the outer function using the parameter name 'item' with my value 'item' -->
<node function="function({item:item})" ... >

In the examples provided, both demonstrate the use of an inner function instead of directly utilizing the passed scope function. For example:

<node function="doFunction(item)" ...>

$scope.doFunction(item) { 
    $scope.function({item: item}); 
}

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

How can I structure the response from HttpClient to make it compatible with *ngFor

I need assistance in solving a minor issue. I am working with data from a REST API, which is returned as an array of objects. After receiving this data in my service, I attempt to transform it and push it to a subject to notify my component about the arriv ...

reveal concealed section and seamlessly glide to specified location inside the secret compartment

I have implemented a feature on my website where hidden divs are revealed one at a time, with the screen scrolling to display each specific div. While this code functions well, I am now looking to enhance it by opening the hidden div and smoothly scrolling ...

Validation is not being enforced for the input field labeled as 'name' in the form

Can anyone assist me with a form validation issue I'm encountering while working on my project? The validation is functioning correctly for email and institution fields, but it seems to be ignoring the name field. Any suggestions or help would be grea ...

What is the best way to automatically post to Slack at regular intervals?

In order to provide users with the option to choose when they receive information from my API, such as daily at 5PM or every Friday at 5PM, I have a configuration page. Once users set their preferred time, I want to send them a Slack message at that specif ...

Manipulate JQuery plug-in properties within an AJAX request using MVC

Currently, I am utilizing a Jquery time picker sourced from Within the view, there exists this time picker control. $("#startTime").timePicker({ startTime: "09.00", endTime: new Date(0, 0, 0, 19, 0, 0), show24Hours: false, ...

tag-swapping function

I have a specific HTML code paragraph that I am working with: <p id=tag1> html statements before click </p> My goal is to create a function that will split the paragraph into two separate paragraphs like so : <p id=tag1> html statement ...

The TS2583 error in TypeScript occurs when it cannot locate the name 'Set' within the code

Just started my Typescript journey today and encountered 11 errors when running tsc app.ts. Decided to tackle them one by one, starting with the first. I tried updating tsconfig.json but it seems like the issue lies within node_modules directory. Any help ...

Errors encountered: Navigation guard causing infinite redirection due to unhandled runtime issue

My Vue3 router is set up with the following routes: export const routes: Array<RouteRecordRaw> = [ { path: "/", name: "Browse Questions", component: HomeView, meta: { access: "canAdmin", }, ...

Sending an HTTP GET request to an API can result in different outcomes depending on whether it is sent to localhost or to a remote server. In some cases, the

My setup involves Angular for the front end and Slim for the back end. Interestingly, when I send a request locally, everything functions smoothly, and I receive the JSON response as expected. http://localhost/domain/api/jobs However, the situation chan ...

Error: The property value supplied for the calc() function is invalid

<App> includes both <Header> and <Content> components. I am attempting to calculate the height of <Content>, which is equal to the height of <App> minus the height of the header. // App.js import { useStyles } from "./Ap ...

Ever wonder what goes on behind the scenes when you press a button before the Javascript method is carried out

My web application is built using ASP.NET MVC 4, jQuery, and Telerik's Kendo controls. Within my webpage, I have the following code snippet: <input id="cmdSaveToFile" title="Save To File" class="button" type="button" value="Save To File" onclick= ...

Stop procrastinating and take action before the JavaScript function concludes

Currently, I am experimenting with onkeydown events to capture the input value in a textarea, process it through a PHP file using Ajax post method, and display the result in an external div. However, the issue is that whenever a key is pressed, I am unable ...

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...

Ways to retrieve the marginLeft of an element set with absolute positioning?

Currently, I am attempting to display an information box when hovering over an element with the mouse. The issue I am facing is that the element moves, and I need to determine its left margin. However, the element does not have a margin-left property in ...

What could be causing my GET route to return an empty array?

I've been attempting to retrieve an event by its id, but for some reason, I'm receiving an empty array as a result in Postman. Below is the code snippet of my route: import { events } from '../../../db.json'; const handler = async (re ...

Properly setting up event handling for a file input and Material UI Button

In my attempt to create a customized form using material UI elements, I am facing an issue. The form allows users to upload files and add notes for each option, which are stored in an array in the component's state. Here is a simplified version of th ...

React component making an Axios request only receives the initial state as a response

I'm struggling with creating an AJAX call using Axios in React. Despite my efforts, I can't seem to pinpoint where the issue lies. Below is what I currently have within my component: ComponentDidMount() { axios.get('https://jsonplacehol ...

Tips on preventing repeated data fetching logic in Next.js App Routes

I'm currently developing a project with Next.js 13's latest App Routes feature and I'm trying to figure out how to prevent repeating data fetching logic in my metadata generation function and the actual page component. /[slug]/page.tsx expo ...

Could implementing a click/keydown listener on each cell in a large React datagrid with thousands of cells impact performance?

Years ago, before the advent of React, I mastered linking events to tables by attaching the listener to the <tbody> and extracting the true source of the event from the event target. This method allowed for a single listener for the entire table, as ...

Tips for ensuring that the lightbox scrolling feature only affects the lightbox and not the entire page

Currently, I am utilizing the lightbox_me jQuery plugin to trigger a lightbox when a user clicks on a product. The issue I am facing is that the lightbox content often extends below the visible area, causing the entire page to scroll when using the right s ...