如何在角度中选择“this”？

Question

我有 5 个按钮使用相同的 ng-click 功能。基本上每个按钮的操作类似于选项卡式导航，您单击其中一个按钮，它会将您带到该选项卡的窗格。这些按钮中的每一个都可以重复，并位于模板中。选项卡窗格也都在模板中，但在用户单击其中一个按钮并创建页面之前，它们并不是全部处于活动状态。所以基本上有多个点击函数嵌套在点击函数中，根据用户激活的内容执行不同的操作。

在 jQuery 中，我可以只使用“this”并选择被点击的对象，然后轻松地对该对象进行所有操作；但是，似乎没有办法仅使用角度来做到这一点。目前，当您单击其中一个按钮时，它对所有按钮执行相同的操作。我想我可以创建 5 个单独的函数，但出于可扩展性的原因，我不想这样做。

总结一下：

• 有没有办法在 Angular 中选择“this”？
• 我想要一个只使用 Angular 而没有 jQuery 的解决方案

• 有没有一种有效的方法来处理点击函数中的点击函数？

  <nav class="block--menu">
  <section class="content--menu" ng-controller="ActiveCtrl">
      <div class="menu" >
          <button  class="menu__item" ng-click="showConfirm()"></button>
          <button  class="menu__item" ng-click="showConfirm()"></button>
          <button  class="menu__item" ng-click="showConfirm()"></button>
          <button  class="menu__item" ng-click="showConfirm()"></button>
          <button  class="menu__item" ng-click="showConfirm()"></button>
      </div>
  </section>
  

Answer 1

您可以在角度事件check the documentation 中使用$event 访问jQuery 事件对象以获取详细信息，但如果您将其发送到控制器，则很可能意味着您没有在angular way 中执行此操作。

用法是

<button  class="menu__item" ng-click="showConfirm($event)"></button>

在控制器中

$scope.showConfirm = function($event){
    //$event.target should be your link
};

Answer 2

您应该停止以 jQuery 方式思考，不要尝试直接操作 DOM。在您的控制器中，您应该只操作数据，然后将其反映在视图中。当您考虑 Angular 方式时，您的代码通常如下所示：

HTML

<section ng-controller="ActiveCtrl as ctrl">
    <div class="menu" >
        <button ng-repeat="button in ctrl.buttons track by $index"
                ng-click="ctrl.showConfirm(button)"
                ng-class="{'menu__item_active':button.active, 'menu__item':true}"
        >{{button.name}}</button>
    </div>
</section>

JavaScript

angular.module('app',[]).
  controller('ActiveCtrl', ['$window', function($window) {
    this.buttons = [{
      name: 'First'
    }, {
      name: 'Second'
    }, {
      name: 'Third'
    }];
    this.showConfirm = function(button) {
      button.active = !button.active;
      $window.alert(button.name);
    }
  }]);

Plunker

http://plnkr.co/edit/Dg10cXqFxEKgEt7jWQ7Z?p=preview