html - 使用 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>

所以我想通过我的指令从我的子菜单触发点击事件。

Answer 1

您可以使用 link 轻松做到这一点在你的指令配置中运行，就像这样 DEMO FIDDLE 。你的 Controller $scope将被解析为指令中的链接函数。所有基于 Controller 的$scope可以在指令链接函数中访问对象。您可以通过阅读 directives documentation 来使用 AngularJS 指令来检查所有好东西。 .

Controller 示例:

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