具有绑定函数参数的AngularJS指令

Posted 2021-05-04

我有一个带有函数参数的AngularJS指令，当我调用指令时它完全正常工作，我想概括它。到目前为止我得到了什么：

.directive('panelBox', function () {
    return {
        restrict: 'E',
        scope: {
            values: '=',
            calculatefn: '&'
        },
        templateUrl: '/ProfitCalculator/PanelBox',
        controller: function ($scope) {


            $scope.calculate=function() {
                $scope.calculatefn();
            }
        }
    }
})

在主要范围内：

$scope.smartBookValues= {
name:'Smart Book',
text:'Smart book header',
controls:[]
};

和html：

<panel-box values="smartBookValues" calculateFn="smartBookCalculateFn()"></panel-box>

现在我正在尝试绑定值和calculateFn，所以我从calculateFn开始并执行：

$scope.smartBookValues= {
name:'Smart Book',
text:'Smart book header',
controls:[],
calculateFn:'smartBookCalculateFn()'
};

和HTML：

<panel-box values="smartBookValues" calculateFn="{{smartBookValues.calculateFn}}"></panel-box>

但我得到：[$ parse：syntax]

语法错误：从[{smartBookValues.calculateFn}}开始的表达式[{{smartBookValues.calculateFn}}]的第2列处的令牌'{'无效键。

答案

首先，您声明为：

calculatefn: '&'   <-- small 'f'

所以html中的语法如下：

<panel-box values="smartBookValues" calculatefn="smartBookValues.calculateFn"></panel-box>  <-- no need for {{}}, as you passing as reference to scope, not as text

在Google上搜索“如何将函数传递给angular指令”