从 angularjs 中的页面和指令执行事件答案

【问题标题】：Executing events from both page and directive in angularjs从 angularjs 中的页面和指令执行事件
【发布时间】：2016-06-24 07:18:30
【问题描述】：

我有两个模块，一个用于实际页面，另一个用于构建可重用组件。我的自定义指令中有一个按钮，它执行操作 A。我在另一个模块页面中使用此指令，其中我有操作 B，一旦单击指令按钮就必须执行该操作。

所以它应该像下面这样：

dir 按钮单击 -> 页面中的函数 A() + 函数 B()。

在我工作的环境中，广播似乎是非正统的。

我在这个plnkr试过了。

代码如下：

// Code goes here
angular.module('diruser', ['dir'])
  .controller('dirusercon', function($scope) {
    $scope.clicks = function(ev) {
      console.log('click from page');
      console.log(ev);
    };
  });

angular.module('dir', [])
  .controller('dircon', function($scope) {
    $scope.dirclick = function(ev) {
      console.log('click from dir');
    }
  })
  .directive('dire', function() {
    return {
      restrict: 'E',
      controller: 'dircon',
      scope: {
        dirclicked: '&'
      },
      template: "<button ng-click='dirclick($event)'>OK</button>"
    };
  });

<!DOCTYPE html>
<html>

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

  <body ng-app='diruser' ng-controller='dirusercon'>
    
    <dire dirclick='clicks(e)'></dire>
  </body>

</html>

请帮忙..

【问题讨论】：

标签： javascript angularjs angularjs-directive dom-events

【解决方案1】：

在您的示例中，有错误：

您在作用域中定义了一个名为 dircliked 的函数，但您将其用作 dirclick。

使用必须是：<dire dirclicked='clicks(e)'></dire>

在您的 dirClick 函数中，您必须在范围内调用 dircliked ：

$scope.dirclick = function(ev){
   console.log('click from dir');
   $scope.dirclicked({e: ev});
}

我编辑了你的 plunker：http://plnkr.co/edit/2L7ezlPKcChQfulZZtx0?p=preview

【讨论】：