AngularJs 指令范围“&”方法

许多 AngularJs 开发人员已经了解 AngularJs 指令,并且可能知道指令范围及其方法。

由于 AngularJS 现在是一个已弃用的框架,我们可以改用 JavaScript 现代框架,如 Vuejs、React 和 Angular。

如我们所知,AngularJs Directive 的作用域方法有 3 个:'@'、'='、'&',但现在我们只讨论 '&' 方法。
我们将看到,如何实现方法 ' &' 在我们的应用程序中。

当我们在当前作用域内定义任何函数并希望将其实现到任何指令时,请记住一件事:我们必须注意函数的参数及其顺序。
例如,如果我们定义了这样的函数:

...
$scope.myFunction = function(arg1, arg2, ...){
    ...
}
...

你必须记住你的函数参数和它们的顺序: 1:arg1,2:arg2 ...

当我们定义了任何指令并希望其中实现 myFunction 时,让我们看看如何实现。

<my-directive any-function="myFunction(arg1, arg2, ...)"></my-directive>
<!--Or-->
<my-directive any-function="myFunction(newArgName1, newArgName2, ...)"></my-directive>

当我们选择使用该语法时,在指令中(我们想要使用它的地方),我们必须使用特殊语法来发送参数。

这是语法。

//inside you directive
...
scope.anyFunction({arg1: [value], arg2: [value], arg3: [value], ...})
//Or
scope.anyFunction({newArgName1: [value], newArgName1: [value], newArgName1: [value], ...})
...

但是如果没有下面的 '&' 方法的第二种语法,Angular 就不会那么酷了。
当我们不想拥有指令的编译或者链接功能时,这种方式非常有用。
或者你不想有一堆代码。

这是第二种方式。

<my-directive any-function="myFunction({arg1: [value], arg2: [value], arg3: [value], ...})"></my-directive>
<!--Or-->
<my-directive any-function="myFunction({newArgName1: [value], newArgName1: [value], newArgName1: [value], ...})"></my-directive>

在指令中,我们只能调用 anyFunction() (没有任何参数)。

这是一个简单的例子,我们可以使用这种方式。

假设我们有一个项目列表,对于每个项目,我们都必须执行删除操作,但我们需要对每次删除进行确认(例如,回答“是”或者“否”的模态)。
我们可以使用它的模板(模态)创建一个指令,并将删除功能发送到其中。
在指令中,我们只能创建一个用于打开模态的事件。
“是”将是确认功能。
当然,每个删除操作都可以有不同的参数。
但是该怎么办呢?
我们如何使用具有不同功能的 ng-click?

答案是:你不需要使用不同的函数。
我们可以只使用一个函数来调用它,而没有任何参数,就像上面的例子一样。

日期:2020-06-02 22:18:45 来源:oir作者:oir