使用模板参数将函数传递给Angular指令 [英] Passing function to Angular directive with template parameter

问题描述

我在模板中使用参数传递给具有隔离范围的指令的函数时遇到麻烦.该指令使用我在其中调用函数的模板，但由于某种原因，我的参数"meetpunt"未定义:

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:

我调试getCoordinaten函数时，meetpunt似乎未定义的模板:

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>

我的指令:

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) {
        }
    }
});

我的控制器:

'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

推荐答案

要将本地参数传递给"@" 的表达式函数，您需要传递参数名称的哈希映射-价值观.为了说明，我将使用一个稍微不同的名称:

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指令时， foo (键)成为该表达式的局部变量，该指令的用户可以将其传递给自己的函数:

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)"...>

(当然，您想将其命名为 meetpunt 而不是 foo )

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

这篇关于使用模板参数将函数传递给Angular指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！