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）

Answer 2

为什么不在指令中设置控制器？并使用“控制器为”语法？

您的主视图

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

指令代码

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

模板

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

说明：

ng-controller，ng-repeat和您的指令都在创建一个新的隔离范围。几乎没有理由拥有如此多的孤立范围（您的样本很短）将使$ digest周期更长。
使用“controller as”语法可以更轻松地确保使用预期的范围。

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

2 个答案: