使用 AngularJS 从指令触发点击事件答案

【问题标题】：Trigger click event from directive using AngularJS使用 AngularJS 从指令触发点击事件
【发布时间】：2017-07-21 19:43:05
【问题描述】：

我有一个 HTML 模板，它显示如下所示的左侧菜单栏：

<li>
  <a href="!#" class="menu-dropdown">
    <i class="menu-icon fa fa-cog"></i>
    <span class="menu-text">GST Returns</span>
    <i class="menu-expand"></i>
  </a>
  <ul class="submenu">
    <li>
      <a>
        <span class="menu-text">GSTR-1</span>
      </a>
      <ul class="submenu" id="toggleOpen1" ng-click="ClickToggle(1)">
        <li>
          <a href="xxx">
            <span class="menu-text">Save</span>
          </a>
        </li>
        <li>
          <a href="xxx">
            <span class="menu-text">File</span>
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a>
        <span class="menu-text">GSTR-2A</span>
      </a>
      <ul class="submenu" id="toggleOpen2" ng-click="ClickToggle(2)">
        <li>
          <a href="xxxx">
            <span class="menu-text">Download</span>
          </a>
        </li>

      </ul>
    </li>
    <li>
      <a>
        <span class="menu-text">GSTR-2</span>
      </a>

      <ul class="submenu" id="toggleOpen3" ng-click="ClickToggle(3)">
        <li>
          <a>
            <span class="menu-text">Save</span>
          </a>
        </li>
        <li>
          <a>
            <span class="menu-text">File</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</li>

我想点击函数ClickToggle(1)的触发器。我的指令如下所示：

app.directive('leftBar', [function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/new-left-bar.html',
  };
}]);

在 index HTML 中，我正在加载我的指令：

<div class="page-sidebar" 
     data-toggle="tooltip" 
     data-original-title="Toggle Left Bar" 
     id="sidebar">
  <left-bar></left-bar>
</div>

所以我想通过我的指令从我的sub-menu 触发点击事件。

【问题讨论】：

为什么要把onclick和ng-click混在一起？
在指令中的链接或控制器中使用范围
当询问由您的代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将获得更好的答案。该代码应该是…… Minimal – 使用尽可能少的代码，但仍会产生同样的问题。见How to create a Minimal, Complete, and Verifiable example。

标签： html angularjs angularjs-directive

【解决方案1】：

您可以在指令配置中使用link 函数轻松完成此操作，例如DEMO FIDDLE。您的控制器$scope 将被解析为指令中的链接函数。所有基于控制器的$scope 对象都可以在指令链接函数中访问。您可能会通过阅读directives documentation 来使用AngularJS 指令检查所有好东西。

控制器示例：

app.controller('MyCtrl', function ($scope) {
    $scope.ClickToggle = function (id) {
      console.log(id);
    }
});

指令模板

<div class="page-sidebar" 
     data-toggle="tooltip" 
     data-original-title="Toggle Left Bar" 
     id="sidebar">
  <left-bar ng-click="clickMe()"></left-bar>
</div>

指令代码：

app.directive('leftBar', function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/new-left-bar.html',
    link: function(scope, element, attrs) {
      scope.clickMe = function() {
        scope.ClickToggle(1);
      };
    }
  }
});

【讨论】：