javascript - Angular : creating a custom directive that can call a scope function

Question

我想创建一个自定义指令(我们称之为 MyDragSource)，它可以通过调用作用域上的函数来获取其“拖动上下文”，如下所示:

<div my-drag-source drag-context="getDragContext">

在本例中，getDragContext 是在范围上定义的函数:

$scope.getDragContext = function() { // return drag source }

我希望在拖动操作开始时延迟调用 getDragContext，而不是预先评估。我怎样才能做到这一点？

在我的自定义指令中，我尝试了以下操作:

$scope.$eval($attrs.dragContext);

但是，这并没有产生预期的结果。

Answer 1

将函数作为指令的属性传递:

<div my-drag-source drag-context="getDragContext()" >

在指令中使用隔离范围，然后导入 dragContext使用& ，它将范围属性定义为一个函数，该函数返回评估父范围中属性内容的结果(在本例中为 $scope.$parent.$eval(attrs.dragContext) ):

scope: {
  dragContext: '&'
}

然后你就可以在 link 中随时调用该函数功能:

$scope.dragContext()

如果您传递的方法不带括号，您仍然可以从 link 调用它函数，您只需要通过添加另一组括号来调用该函数:

$scope.dragContext()()