使用模板参数将函数传递给Angular指令

Question

嗨我在模板中使用参数时遇到问题,因为我已经将一个函数传递给了一个带有隔离范围的指令.该指令使用我调用函数的模板,但由于某种原因我的参数"meetpunt"是未定义的:

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

 <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] + ')';
        };


    });

这就是我调用指令的方式:

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

任何帮助,将不胜感激.亲切的问候

Answer 1

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

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

然后,当使用then指令时,foo(键)成为该表达式的局部变量,该指令的用户可以将其传递给他自己的函数:

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

(当然,你想要命名meetpunt而不是foo)