如何使用混合参数调用父级的作用域函数？

Question

这是我的情况——我有独立范围的指令，我想使用 mixed 参数从父范围调用函数。混合——意思是，一个参数来自指令，另一个来自父级。

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

我正在考虑两种方法 -- 一种是模拟柯里化，使用父参数调用函数，这将 return 函数接受指令参数。第二——以某种方式在父级范围内引入指令变量，所以我可以写：

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

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

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

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

Answer 1

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

首先，设置主应用程序 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。

如何使用混合参数调用父级的作用域函数？

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

javascript

angularjs

angularjs-directive

isolate-scope