Angular: 函数调用作为指令的属性值

Question

这是我指令的缩减：

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    template:
      '<form name="form" action="{{action}}" method="post" target="_blank">' +
        '<input type="hidden" name="item_name" value="{{itemname}}">' +
      '</form>',
    scope: {
      action: '@action',
      itemname: '@itemname',
    },
    link: function(scope, element, attrs) {
      scope.action = attrs.action || 'http://www.example.com';
      scope.itemname = attrs.itemname();
    }
  };
});

我是这样使用的：

<div ng-if="itemWasSelected">
  <my-directive
     action="{{ 'http://www.example.com' }}"
     itemname="itemNameBuildFunction"
  />
</div>

在我的控制器中，我有：

$scope.itemNameBuildFunction = function() {
  return $scope.value1 + $scope.value2;
};

我希望我的指令在 linked 时（它在 ng-if 子句中，所以，我的意思是，当 ng-if 条件计算为真时），调用 attrs.itemname() $scope 函数，在控制器的 link 函数中分配 scope.itemname 变量。

相反，我得到的是错误：

TypeError: attrs.itemname is not a function

你能给我一些指示吗？如您所见，我对 angular 指令感到很困惑...:-(

Answer 1

您不需要此声明 attrs.itemname()。

您在指令中传递的函数引用绑定到 scope 上的变量 itemname，该变量作为第一个参数传递到 link 函数中，其中 isolated scope

只需更改

中的语句

scope.itemname = attrs.itemname();

收件人：

scope.itemname();  // this will call the function `itemNameBuildFunction`

编辑：

您使用了 @ 绑定函数的运算符，用于传递原语或 object.You 传递函数，因此，您应该使用 & 运算符，将评估为函数.

scope: {
      action: '@action',
      itemname: '&itemname',
    }

编辑 2：你应该传递函数 itemNameBuildFunction() 而不是 itemNameBuildFunction

<my-directive action="{{ 'http://www.example.com' }}" 
    itemname="itemNameBuildFunction()" />

工作Plunker

Answer 2

在我看来，您实际上想要 '=' 类型，它将接受 javascript 对象，并且（不需要 JSON.parse）允许您在您的范围内使用它们。函数是 javascript 对象，它可以是运行使用 ();

所以最好的解决办法是：scope: { action: '@', itemname: '=', }, 这将允许您对项目名称进行回调，然后运行它在您认为合适的范围内。

https://plnkr.co/edit/cKzLhP4SwHey266Flr5w?p=preview.

此外，其他人会如何提交您提供的表格？如果你想提交一个隐藏的输入名称，你应该有一个 <input type='submit'/> 似乎没有意义。另外，您可能想使用 templateURL 并包含一个 HTML 模板，而不是在您的 js 中包含一个大的动态表单。

Angular: 函数调用作为指令的属性值

Angular: function call as attribute value for directive

javascript

using-directives

angularjs