使用AngularJS从指令触发单击事件

Question

我有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',
  };
}]);

这里索引HTML我正在加载我的指令：

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

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

Answer 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);
      };
    }
  }
});