Using a function as an argument in the ng-repeat directive object

Having an issue with the ng-repeat directive. I have a parent controller containing an array of objects like this:

$scope.queue = [
  {
    name: 'Mark',
    sex: 'Male',
    age: 21
  },
  {...}
];

$scope.changePositionInQueue = function (currIndex, targetIndex) {
  // move up / down person in queue 
};

My goal is to pass the parent controller's function to my directive's isolated scope ('person'), while still being able to utilize '$index', '$first', and '$last' variables.

<person data-change-position="changePositionInQueue" data-person="person" ng-repeat="person in queue"></person>

Directive scope declaration:

scope: {
 person: '=',
 changePosition: '&'
}

The issue arises when creating an isolated scope within the ng-repeat loop as it causes the loss of ng-repeat properties. However, using a default scope set by ng-repeat provides access to the desired properties but limits the usage of the parent function.

Answer №1

Here is my answer to the challenge you presented:
Take a look:

<my-custom-directive custom-func="func($index)" information="data" ng-repeat="data in dataset"><span>{{data.id|json}}</span><br></my-custom-directive>

In this example, I am directly calling the parent function within the directive's link function:

myApp.directive('myCustomDirective', function() {
  return {
    //require: 'ngModle',
    scope: {
      information: "=",
      customFunc: "&"
    },
    link: function(scope, elem, attr, ngModel) {
        scope.customFunc() // Here, the parent scope function is invoked and an alert is triggered

    }

  }

Check out the detailed Plunker here

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

Trouble with Three.js: Issue with loading textures by name

I have a file with a .obj extension that I am currently loading using a loader. This file contains multiple meshes which I want to use separately as individual objects. The challenge I am facing is that each of these objects has a distinct texture. However ...

Viewing CSV Headers with PapaParse Plugin

I am currently utilizing the PapaParse plugin to handle CSV files. I have implemented a function that generates a table for displaying the results extracted from the CSV file. function processFile(evt) { var document = evt.target.files[0]; Papa.parse(doc ...

What does the JS Array Filter function return?

Is it necessary to include a return statement in the filter function when NOT using ES6 arrow syntax? Could the two separate filter functions be combined into one for efficiency? cars.filter(function(car, index) { return car[0].setAttribute("data-ori ...

What is the reason behind my titles being triple the length they should be?

Here is my personal website The titles are appropriately set for the About College section Note: Utilizing Purl library for this purpose var seg2 = ''; if (url.segment(2) == 'college-life') seg2 = "College Life"; else if (url.seg ...

Even after implementing the focus() function, the list item still fails to receive focus

How can I display a list and focus on the first item in the list when a user presses the 'm' key on the keyboard? I have tried using the focus() method on the list item, but it does not seem to be working. Below is the code snippet that I am work ...

Fix issue with nested form in Rails 3.0.9 where remove_fields and add field link functionalities are not functioning properly

I've been watching Ryan Bates' nested_forms episodes 1 & 2 on RailsCasts, successfully implementing the functionality in one project without any issues. However, in a new project using the same reference, the remove and add field functionalit ...

Adding model ImageField Upload using DjangoREST and Angular

I'm new to REST and I am trying to create a simple app with one model that has two fields: CharField and ImageField. model: class Photo(models.Model): img = models.ImageField(upload_to='photos/', max_length=254) text = models.CharF ...

Adjusting the projection matrix parameters in Three.JS

My goal for this project is to manually adjust the parameters of the projection matrix. For instance, I would like to have the ability to do something similar to the following: camera.projectionMatrix[15] = 1; Is there a way to achieve this in Three.JS? ...

Vue component failing to re-render after data modification

I'm a Vue beginner and I am attempting to showcase a list of "notes" that should update once a button is clicked (I have manually set the value to add for now). However, after adding a new item to the array, the changes are not reflected on the user i ...

What causes the failure of making an ajax call tied to a class upon loading when dealing with multiple elements?

I can see the attachment in the console, but for some reason, the ajax call never gets triggered. This snippet of HTML code is what I'm using to implement the ajax call: <tr> <td>Sitename1</td> <td class="ajax-delsit ...

Design a custom screensaver using jQuery that includes a timed delay feature and an alert message

I am currently working on implementing a screensaver feature for my website. Here is the breakdown of what I am trying to achieve: When detecting the onload, clicks, and touches, I want to start a timer that counts 5 seconds. If any of these events are d ...

What is the best way to eliminate HTML encoding from a string in Angular 4?

Looking for a simple solution to my problem. I have two strings that look like this: htmlStr = "&lt;strong&gt;News Body&lt;/strong&gt;"; htmlStr1 = "<strong>News Body2</strong>"; To display these strings on a website, I am usi ...

AngularJS is not able to load JSON files

I am facing the same issue as the individual in this discussion: $http.get doesn't load JSON Unable to find a solution either way. I am running the website using MAMP, so I don't think that's the problem? Below is the code: index.html < ...

jquery toggle for partial visibility not functioning properly

Can jquery sliding functions be used to partially show and hide content? In this scenario, there is a list with 7 items but only the first two are visible initially, while the rest are hidden. The goal is to have all 7 items show when the user clicks to v ...

Ways to retrieve information from this data organization

The data received as a response from an ajax request, stored in a variable called results, is structured like this: Object {hits: Object, links: Object} hits:Object hits:Array(2) 0:Object active:true email:"<a href="/cdn-c ...

update url to redirect hashbang with history.js

Upon further investigation, I have observed that history.js has the ability to automatically transform http://www.site.com/some/path#/other/path into http://www.site.com/other/path when used with a html5 enabled browser. While this feature is useful, ...

A guide on effectively mocking functions in Jest tests with Rollup.js

I am currently in the process of developing a React library called MyLibrary, using Rollup.js version 2.58.3 for bundling and jest for unit testing. Synopsis of the Issue The main challenge I am facing is with mocking a module from my library when using j ...

Developed a query, seeking information for populating a dropdown menu

I am currently in the process of editing a webpage that utilizes both PHP and HTML. Essentially, I have a dynamic list of items being generated where the number of values can vary based on the row length. Next to each item in the list, there is a "delete ...

Using jQuery to create clickable images by enclosing them in an `<a>` tag

How can I make each image with a specific class clickable? I would like jQuery to: Retrieve the src attribute of the image. Enclose the image within an a href tag that includes that src URL. .clickable { padding: 20px; border: 1px ...

Unspecified property in Vue.JS data object

Whenever I try to display my modal, an error pops up indicating that the property is not defined, even though I have clearly declared it in the Data(). It seems like there is a crucial aspect missing from my understanding of how everything functions... T ...