使用 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. Your controller $scope will be parsed into the link function in your directive. All controller based $scope objects can be accessed inside the directive link function. You may going to checkout all the good stuff by using AngularJS directive by reading the directives documentation.

控制器示例：

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

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

Trigger click event from directive using AngularJS

html

angularjs

angularjs-directive

控制器示例：

指令模板

指令代码：