2

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

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

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

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

我更喜欢第二个。但我不知道该怎么做，即如何将指令变量引入父范围 - 不进行手动“反向”绑定，例如：

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

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

4

1 回答 1

3

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

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

于 2016-08-07T11:40:00.097 回答