如何使用带有参数的“和”在指令链接函数中调用控制器函数？答案

【问题标题】：How to call a controller function, inside a directive link function using '&' with a parameter?如何使用带有参数的“和”在指令链接函数中调用控制器函数？
【发布时间】：2017-06-29 06:31:02
【问题描述】：

我正在尝试将参数传递给一个函数，在一个指令链接函数内部，类似于这个问题： Angular: calling controller function inside a directive link function using &

但是，虽然我已经看到了一些示例，例如：Passing Parameters from a Directive to a function，但我已经看到在指令内的链接中设置了参数值。但是，我还没有看到您在哪里传递原语，例如将数字作为参数传递给将其传递给控制器函数的指令。

我尝试了多种方法，但还没有弄清楚语法。

HTML 代码：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="app" ng-app="app">
    <div ng-controller="mainCtrl">
          <my-directive ctrl-fn="ctrlFn(count)"></my-directive> 
        </div>
      </div>
  </body>

</html>

SCRIPT.JS

var app = angular.module('app', []);

app.controller("mainCtrl", function($scope) {
  $scope.count = 0;
  $scope.ctrlFn = function() {
      $scope.count = 0;
      console.log('In mainCtrl ctrlFn!');
      $scope.count += count;
     // console.log("count is: " + JSON.stringify($scope.count));
    //Call service here
  };  
})


.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      'count' : '&',
      'ctrlFn' : '&'
    },
    template: "<div><button ng-click='ctrlFn({count: 10})'>Click Here</button></div>",
    link: function(scope, element, attributes) {
      var count = null;
      scope.ctrlFn = scope.ctrlFn({count: count});
      //scope.text = scope.fn({ count: 0 });
    }
  };
});

我的小伙伴在这里：http://plnkr.co/edit/6uDntNeqe0g343PmeCED?p=preview

在这个用例中可以将原语作为参数传入吗？如果是这样，我在这里错过了什么？

后果：

如果有人在 angularjs 文档中寻找这种语法：ctrlFn({count: 10})，这里会在自定义指令下提到它：

通常希望通过一个表达式到父范围，这可以通过传递一个映射来完成将局部变量名称和值放入表达式包装函数中。例如， hideDialog 函数在何时显示一条消息对话框被隐藏。这是通过调用在指令中指定的关闭（{消息：'暂时关闭'}）。然后局部变量消息将在关闭表达式中可用。

【问题讨论】：

标签： angularjs angularjs-directive custom-directive

【解决方案1】：

你犯了两个错误：

scope.ctrlFn = scope.ctrlFn({count: count}); - 此行覆盖传递的对函数的引用并将其设置为此函数返回的值（在这种情况下为undefined）
要将count 值传递给您的指令，您应该使用= 而不是&

以下是简化示例的代码。

script.js：

var app = angular.module('app', []);

app.controller("mainCtrl", function($scope) {
  $scope.count = 0;
  $scope.ctrlFn = function(count) {
      console.log(count)
      console.log('In mainCtrl ctrlFn!', count);
      $scope.count += count;
    //Call service here
  };  
})


.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      'count' : '=',
      'ctrlFn' : '&'
    },
    template: "<div><button ng-click='ctrlFn({ count: 100 })'>Click Here</button></div>"
  };
})

index.html:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.2" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="app" ng-app="app">
    <div ng-controller="mainCtrl"> {{count}}
          <my-directive ctrl-fn="ctrlFn(count)"></my-directive> 
        </div>
      </div>
  </body>

</html>

【讨论】：

好吧，我做对了一件事，我问了一个关于 SO 的问题。感谢您的帮助！
很高兴能为您提供帮助。
我刚刚经历了这个，所以有没有办法让计数本身不在指令代码中，只需传递一个值，比如 100 从 ng-click 到控制器，而不必把它进入指令链接功能？我试图使它成为一个组件并封装功能，但我不希望指令知道有关值本身的任何信息，只需将其传递即可。我想要在指令之外设置的值。
当然，答案已更新。实际上，您在示例中正确地做到了。
我很接近，但非工作代码毫无价值。感谢您的更新答案！