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

Question

我有一个带有函数参数的 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 列中的标记“{”无效键。

Answer 1

首先，您声明为：

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 上搜索“如何将函数传递给角度指令”