如何使用混合参数调用父级的范围函数

How to call parent's scope function with mixed arguments?

本文关键字：范围 函数 调用 何使用 混合 参数      更新时间：2023-09-26
这是我

的情况 - 我有具有隔离作用域的指令，我想从父级的作用域调用带有混合参数的函数。混合 - 意思是，一个参数来自指令，另一个来自父级。

如果参数来自指令，我可以将该函数与<绑定并使用它，如果参数来自父级的范围，我可以将整个函数调用与&绑定。

我正在考虑两种方法 - 一种，模拟柯里，使用父参数调用函数，这将返回接受指令参数的函数。第二 -- 以某种方式在父级的作用域中引入指令变量，所以我可以写：

<my-directive on-alarm="emergency(parent_var,dir_var)"/>

我更喜欢第二个。但我不知道该怎么做，即如何将指令变量引入父级的范围——而不做手动的"反向"绑定，例如：

<my-directive for_sake_of_calling="dir_var" on-alarm="emergency(parent_var,dir_var)"/>

但这些更像是我的猜测——主要问题是：如何用混合参数调用 parent 函数？

您可以通过执行以下操作来实现此目的：

首先，设置主应用程序 HTML，

<body ng-app="app">
    <div ng-controller="MainCtrl as vm">
        Emergency text: {{vm.emergencyText}}
        <my-directive on-alarm="vm.emergency(vm.parentVar, directiveVar)"></my-directive>
    </div>
</body>

您会注意到on-alarm回调包含对 vm.parentVar 变量的引用，该变量仅引用 MainCtrl.parentVar ，以及来自指令本身的directiveVar。

现在我们可以创建我们的主控制器：

angular.module('app', []);
angular
  .module('app')
  .controller('MainCtrl', function () {
    // Initialise the emergency text being used in the view.
    this.emergencyText = '';
    // Define our parent var, which is a parameter called to the emergency function.
    this.parentVar = 'This is an emergency';
    // Define the emergency function, which will take in the parent 
    // and directive text, as specified from the view call 
    // vm.emergency(vm.parentVar, directiveVar).
    this.emergency = function (parentText, directiveText) {
      this.emergencyText = parentText + ' ' + directiveText;
    }.bind(this);
  });

最后，我们将创建指令。

angular
  .module('app')
  .directive('myDirective', function () {
    return {
      scope: {
        onAlarm: '&'
      },
      link: function (scope, element, attrs) {
        scope.onAlarm({ directiveVar: 'from myDirective' });
      }
    }
  });

魔术发生在我们打电话scope.onAlarm({ directiveVar: 'from myDirective' });之后。这个调用告诉 angular 警报回调函数(紧急(将可以访问 directiveVar ，我们之前通过 on-alarm="vm.emergency(vm.parentVar, directiveVar)" 在视图中引用了它。在后台，angular 将通过其 $parse 服务将 parentVar 作用域正确解析为 MainCtrl，并将 directiveVar 作用域解析为指令。

这是一个完整的 plunkr。

相关文章：