Inject the ng-repeat variable into a personalized directive

Question

Inject the ng-repeat variable into a personalized directive

When working with an ng-repeat and a custom directive, I am facing the challenge of passing the "item" variable from ng-repeat to the directive. Here is an example code snippet illustrating this situation:

<li ng-repeat="item in list">
   <div custom-directive custom-data="item"></div>
</li>

Let's also consider a simple dummy directive for demonstration purposes:

angular.module('someModule').directive('customDirective', function() {
    restrict: 'A',
    scope: {customData: '@'},
    link: function(scope) {
       console.log(scope.customData);
    }
});

Using custom-data="item" results in the customData inside the directive being equal to the string "item".
If we use custom-data="{{item}}", the customData inside the directive becomes a stringified representation of the item object, causing any references to other objects within it to be lost.

The main question now arises: How can I pass the item as an object to my directive effectively?

javascript angularjs

Answer 1

Answer №1

To fix the issue, simply replace '@' with '=' in your scope assignment

angular.module('someModule').directive('customDirective', function() {
    restrict: 'A',
    scope: {customData: '='},
    link: function(scope) {
       console.log(scope.customData);
    }
});

Answer 2

To fix the issue, simply replace '@' with '=' in your scope assignment

angular.module('someModule').directive('customDirective', function() {
    restrict: 'A',
    scope: {customData: '='},
    link: function(scope) {
       console.log(scope.customData);
    }
});

Answer 3

Answer №2

If you want to customize the filter in the ng-repeat, you can do it like so:

<li ng-repeat="item in list | customFilter">
   <div my-custom-directive data="item"></div>
</li>

In your controller:

'use strict';
filters.filter("customFilter", function(){
    return function(input){
        angular.forEach(input, function(key, val){
            if(typeof input[val].item == "string"){
                input[val].item = JSON.parse(input[val].item);
            }
        });
        return input;
    };
});

This will transform each item in the list into an object before displaying them.

Don't forget to update from '@' to '=' for it to work properly. A simple switch won't give you the desired outcome.

Answer 4

If you want to customize the filter in the ng-repeat, you can do it like so:

<li ng-repeat="item in list | customFilter">
   <div my-custom-directive data="item"></div>
</li>

In your controller:

'use strict';
filters.filter("customFilter", function(){
    return function(input){
        angular.forEach(input, function(key, val){
            if(typeof input[val].item == "string"){
                input[val].item = JSON.parse(input[val].item);
            }
        });
        return input;
    };
});

This will transform each item in the list into an object before displaying them.

Don't forget to update from '@' to '=' for it to work properly. A simple switch won't give you the desired outcome.

Inject the ng-repeat variable into a personalized directive

Answer №1

Answer №2

Similar questions

Unexpected request causes a dilemma during the karma test for an Angular directive

Display the QWebEngineView page only after the completion of a JavaScript script

A dynamic JQuery carousel displaying a variety of albums

Update the controller variable value when there is a change in the isolate scope directive

What is the best way to call a method within a TypeScript class using its name as a string while already inside the class itself?

What is the best way to position a popup div in CSS?

Ways to generate a customized template using the directive attribute parameter

A guide to implementing drag and drop functionality using JavaScript

On mobile devices, the height of the absolutely positioned element is larger than its

Adjust the color of static hyperlinks based on the background color

Is it possible to utilize ember-cli solely as a frontend tool, much like how we use JavaScript and jQuery?

Changing guid bytes into a string using JavaScript

Is it possible to retrieve the HttpsError status from a Firebase function?

Is there a way to set the default state of a checkbox in a spring-form?

What should I do to resolve the message 'Ignoring invalid configuration option passed to Connection' that I received?

Modifying Div Size with Jquery

What is the reason for the jQuery callBack handler returning [object Object]?

Is it unorthodox to utilize constructor instances as prototypes in "WebGL - Up and Running"?

Querying Denormalized Data in AngularFire 0.82: Best Practices and Strategies

Using AngularJS to manipulate the DOM after the view has completely loaded