无法将函数传递给指令

Question

我有一个控制器和指令定义为：

angular.module('cms', ['TestMod'])
.controller('MainCtrl', function() {
  this.refreshPage = function() {
    alert('Hello World');
  };
});

angular.module('TestMod', [])
.directive('testCtl', function() {
  return {
    scope: {
      tmOnClose: '&',
    },
    template: '<div ng-click="close()">Hello World</div>',
    link: function(scope, element, attrs) {
      scope.close = function() {
        if(scope.tmOnClose)
            scope.tmOnClose();
      }
    }
  }
 })

在我的 HTML 中，我试图将 refreshPage 函数传递到指令中，例如：

<html ng-app="cms">

    <head>
        <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>

    <body ng-controller="MainCtrl">
        <h1>Hello Plunker!</h1>
        <test-ctl tm-on-close="refreshPage"></test-ctl>
    </body>
</html>

当我点击指令时，调用了关闭函数，但从未调用过刷新页面函数。调试时，scope.tmOnClose() 的值始终为

function(b)(return n(a,b))

如何获取实际函数以便我可以在指令中调用它？

Plunker Here

编辑：我必须告诉自己。我从一个更大的项目中设置此示例，因为我不想在不清楚相关内容时将代码页粘贴到此处。 Sergio 的回答是 100% 正确的，这实际上是我遇到的一个问题。然而，我更大的问题是，在我更大的应用程序中，我的不包含在定义我的控制器中。我将其添加为注释以希望对其他人有所帮助，因为显然 angularjs，在这种情况下，不会告诉您某些内容未定义，它只会定义它并传递给它。

Answer 1

首先，为您的控制器命名。其次，在指令中使用 & isolate scope.

时调用该函数

<body ng-controller="MainCtrl as ctrl">
    <h1>Hello Plunker!</h1>
    <test-ctl tm-on-close="ctrl.refreshPage()"></test-ctl>
</body>

Answer 2

使用 & 时必须这样引用它：

<test-ctl tm-on-close="refreshPage()"></test-ctl>

Answer 3

函数可以传递给范围对象中带有“=”的指令

angular.module('cms', ['TestMod'])
 .controller('MainCtrl', function() {
      this.refreshPage = function() {
      alert('Hello World');
  };
 });

angular.module('TestMod', [])
 .directive('testCtl', function() {
     return {
       scope: {
         tmOnClose: '=',
       },
       template: '<div ng-click="close()">Hello World</div>',
       link: function(scope, element, attrs) {
              scope.close = function() {
              if(scope.tmOnClose)
                scope.tmOnClose();
          }
        }
       }
  })

"controller as" 必须使用语法，因为控制器作用域是用 refreshPage 函数声明的

<!DOCTYPE html>
<html ng-app="cms">

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6"   src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl as ctrl">
    <h1>Hello Plunker!</h1>
    <test-ctl tm-on-close="ctrl.refreshPage"></test-ctl>
  </body>

</html>

无法将函数传递给指令

Can't pass function to directive

angularjs

angularjs-directive

angularjs-controller