Passing function to Angular directive with template parameter

Question

Hi I am having trouble using a parameter in my template for a function that I have passed into a directive with isolate scope. The directive uses the template in which I am calling the function but for some reason my parameter "meetpunt" is undefined:

my template where meetpunt seems to be undefined when I debug the getCoordinaten function:

 <tr ng-repeat="meetpunt in meetpunten">
     <td>{{getCoordinaten(meetpunt)}}</td>
 </tr>

my directive:

angular.module('zendantennesApp').directive('meetpuntTabel', function() {
    return {
        restrict: 'E',
        templateUrl: 'views/components/meetpunt-tabel/meetpunt-tabel.html',
        scope: {
            single: '@',
            meetpunten: '=',
            getCoordinaten: '&'
        },
        link: function(scope, element, attrs) {
        }
    }
});

my controller:

'use strict';

angular.module('zendantennesApp')
    .controller('MeetpuntTabelCtrl', function ($scope) {


        $scope.getCoordinaten = function (meetpunt) {
            return '(' + meetpunt.geometry.coordinates[0] + ', ' + meetpunt.geometry.coordinates[1] + ')';
        };


    });

this is how I am calling the directive:

<section ng-controller='MeetpuntTabelCtrl'><meetpunt-tabel meetpunten='meetpunten' get-coordinaten='getCoordinaten(meetpunt)' single='true'></meetpunt-tabel></section>

any help would be appreciated. kind regards

Shouldn't you use $parent because you are in a ng-repeat? $parent.getCoordinaten(meetpunt) — Mike Vranckx
– Mike Vranckx, Commented Sep 18, 2015 at 6:39

New Dev · Accepted Answer · 2015-09-18 08:47:06Z

5

To pass a local argument to an expression function of "@", you need to pass a hash-map of argument name-values. For illustration, I'll use a slightly different name:

{{getCoordinaten({foo: meetpunt})}}

Then, when then directive is being used, foo (the key) becomes the local variable to that expression, which a user of the directive can pass to his own function:

<meetpunt-tabel get-coordinaten="getCoordinaten(foo)"...>

(Of course, you'd want to name it meetpunt instead of foo)

edited Sep 18, 2015 at 8:47

answered Sep 18, 2015 at 6:53

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arno_Geismar Over a year ago

yep that did the trick. thank you. makes total sense when I think of it as a key that is passed.

New Dev Over a year ago

@Arno_Geismar, as an aside, you should know that it's not the best idea to have a function call in an expression, {{doSomething()}}, because this expression is executed on every digest cycle. While, in your case, the function is simple, which is good, it is also outside of your directive, so a user of your directive may inadvertently make the function more complicated... perhaps, consider re-factoring some things

Arno_Geismar Over a year ago

yeah am refactoring as we speak, I took a different approach. Thank you for the clear answer

Deblaton Jean-Philippe · Accepted Answer · 2015-09-18 07:04:43Z

Why don't you set the controller inside your directive? And use the "controller as" syntax?

your main view

<section>
   <meetpunt-tabel meetpunten='meetpunten' single='true'>
   </meetpunt-tabel>
</section>

directive code

angular.module('zendantennesApp').directive('meetpuntTabel', function() {
    return {
        restrict: 'E',
        templateUrl: 'views/components/meetpunt-tabel/meetpunt-tabel.html',
        scope: {
            single: '@',
            meetpunten: '='
        },
        link: function(scope, element, attrs) {
        }
        controller: function(){
            this.getCoordinaten = function (meetpunt) {
                return '(' + meetpunt.geometry.coordinates[0] + ', ' + meetpunt.geometry.coordinates[1] + ')';
        };
        },
        controllerAs: 'meetPuntCtrl'
    }
});

template

 <tr ng-repeat="meetpunt in meetpunten">
     <td>{{meetPuntCtrl.getCoordinaten(meetpunt)}}</td>
 </tr>

Explanations :

ng-controller, ng-repeat, and your directive are all creating a new isolated scope. Having so much isolated scopes for almost no reason (your sample was short) will make the $digest cycle longer.
Using the "controller as" syntax makes it easier to make sure you are using the intended scope.

Collectives™ on Stack Overflow

Passing function to Angular directive with template parameter

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related