角度:创建可以调用作用域函数的自定义指令

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

本文关键字：函数 自定义 指令 作用域 调用 创建 角度      更新时间：2023-11-29

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

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

在本例中，getDragContext 是在作用域上定义的函数：

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

我希望在拖动操作开始时延迟调用getDragContext，而不是预先评估。我该怎么做？

在我的自定义指令中，我尝试了以下内容：

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

但是，这不会产生预期的结果。

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

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

在指令中使用隔离作用域，并使用 & 导入dragContext，它将 scope 属性定义为返回在父作用域中评估属性内容的结果的函数(在本例中为 $scope.$parent.$eval(attrs.dragContext)(： 

scope: {
  dragContext: '&'
}

然后，您可以随时在函数中调用该函数link：

$scope.dragContext()

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

$scope.dragContext()()

你可以

这样称呼它：

var data = $scope[$attrs.dragContext]();

例

相关文章：