Question

我更喜欢尽可能使用命名函数。但我不能＆＃39;似乎弄清楚如何在自定义指令中使用命名函数作为链接函数。

以下是有效的：

.directive('myDirective', myDirective);

function myDirective($log) {
return {
  restrict: 'E',
  scope: {
    myData: '=',
    forms: '='
  },
  templateUrl: 'myDirective.template.html',
  controller: myDirectiveController,   // Not shown in this example
  controllerAs: 'vm',
  bindToController: true,
  link: function ($scope, elem, attrs) {}
    $log.debug('testing');
}

这里有什么不起作用：

.directive('myDirective', myDirective);

/* @ngInject */
function myDirective($log) {
return {
  restrict: 'E',
  scope: {
    myData: '=',
    forms: '='
  },
  templateUrl: 'myDirective.template.html',
  controller: myDirectiveController,   // Not shown in this example
  controllerAs: 'vm',
  bindToController: true,
  link: myLinkFunction
}

function myLinkFunction($scope, elem, attrs) {
  $log.debug('testing');
}

将$ log服务传递给指定的函数并不起作用：

function myLinkFunction($scope, elem, attrs, $log) {
  $log.debug('testing');
}

这可能吗？

Answer 1

这就是变量范围在JS中的工作方式。您不能指望myLinkFunction将您的指令视为父变量范围，因为myLinkFunction是在外部定义的。此外，您无法注入link函数或仅添加其他参数并将其传递到那里。但以下内容将起作用

function myDirective($log) {
return {
  ...
  // there are 5 mandatory parameters for link
  link: function (scope, elem, attrs, ctrl, transcludeFn) {
    return myLinkFunction(scope, elem, attrs, ctrl, transcludeFn, $log);
  },
  ...
}

function myLinkFunction(scope, elem, attrs, ctrl, transcludeFn, $log) {
  $log.debug('testing');
}

更简洁的方法是让控制器包含指令所需的所有内容：

function myDirective() {
return {
  ...
  controller: function ($log) {
    this.$log = $log;
  },
  controllerAs: 'vm',
  bindToController: true,
  link: myLinkFunction
}

function myLinkFunction($scope, elem, attrs, ctrl) {
  ctrl.$log.debug('testing');
}

虽然没有控制器AS，但效果最好，否则会污染范围。幸运的是，如果不使用controllerAs，嵌套指令如何相互通信还有其他选择。

Answer 2

您无法将服务注入链接功能，因此第二种方法无效，但第一种方法应该正常工作

您是否尝试使用$ inject，在函数声明之前添加此行

myDirective.$inject = ["$log"]

试试这个告诉我，

Answer 3

不可能。

链接功能具有设置参数，无法从DDO *中提取，仍然可以访问DI'd值，因为您无法将内容注入链接步骤。

如果要从DDO的return值中提取它，可以执行以下操作：

app.directive('...', function ($log) {
  function linkerFn () {
    $log('something');
  }

  return {
    link: linkerFn
  };
});

*：指令定义对象

将服务传递给自定义指令中的命名链接函数

3 个答案: