Question

我有5个按钮使用相同的ng-click功能。基本上每个按钮的操作类似于选项卡式导航，您可以在其中单击其中一个按钮，然后将其带到该选项卡的窗格。这些按钮中的每一个都可以重复，并且位于模板中。选项卡窗格也都在模板中，但在用户单击其中一个按钮并创建页面之前，它们都不是活动的。因此，基本上有多个点击功能嵌套在点击功能中，这些功能根据用户的激活情况做了不同的事情。

在jQuery中，我可以使用＆＃34;这个＆＃34;并选择被单击的对象，并轻松地对该对象进行所有操作;然而，它并没有出现在那里使用角度来做到这一点的方法。目前，当您单击其中一个按钮时，它对所有按钮执行相同的操作。我想我可以创建5个单独的函数，但出于可伸缩性的原因，我不想这样做。

总结一下：

有没有办法选择＆＃34;这个＆＃34;在Angular？
我喜欢只使用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-way时，您的代码通常如下所示：

<强> 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

我该如何选择＆＃34;这个＆＃34;在棱角分明？

2 个答案: