许多 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?
答案是:你不需要使用不同的函数。
我们可以只使用一个函数来调用它,而没有任何参数,就像上面的例子一样。