角ng-click函数并不总是触发

Question

我有一个不总是触发的Angular ng-click函数。

网址在这里：http: //430designs.com/xperience/black-label-app/deck.php

该函数是点击这里的：

$scope.clickLike = function() {
      $('.icon-like').on('click', function(){
        $(this).toggleClass('happy');
      });
    }; 

我在HTML中这样称呼它：

<div class="icon-like" ng-click="clickLike()"</div>

检查链接，然后可以在controller.js第214行中进行调试。我不确定发生了什么。

非常感谢所有帮助！

Answer 1

您不需要$scope.clickLike的onclick方法

<div class="icon-like" ng-click="clickLike($event)"</div>

$scope.clickLike = function(e) {
  e.currentTarget.toggleClass('happy');
});

e.currentTarget将是触发事件的元素。

您还需要在ng-click指令中传递$event ：

这是一个示例： http : //www.freedevelopertutorials.com/angularjs-tutorial/examples/angularjs-event-example/

Answer 2

因此，您需要使用一条指令来操作您的DOM ...并不是从控制器中操作DOM的最佳实践。 看看这个例子，我创建了一个用作属性的指令（就像ng-click一样），并将一个类应用于该指令作为其属性的元素。

从角度站点：

使用控制器可以：

• 设置$ scope对象的初始状态
• 将行为添加到$ scope对象。

请勿使用控制器执行以下操作：

• 操作DOM-控制器应仅包含业务逻辑。 将任何表示逻辑放入Controller中都会极大地影响其可测试性。 Angular在大多数情况下都有数据绑定，并且有指令来封装手动DOM操作。
• 格式输入-改用角度形式的控件。
• 过滤器输出-改用角度过滤器。 在控制器之间共享代码或状态-改为使用角度服务。
• 管理其他组件的生命周期（例如，创建服务实例）。

让我知道这是否有帮助： https : //plnkr.co/edit/hyS5yxwajbJKSFYylKDw?p=preview

angular.module('plunker', [])
  .directive('clickLike', [clickLike])
  .controller('HomeController', [HomeController]);

function clickLike() {

    var self = {};

    self.restrict = 'A';
    self.link = linkFn;

    return self;

    function linkFn($scope, $element, $attributes) {

        $element.on('click', function(event) {

        $element.toggleClass('happy');

    });

  }

}

function HomeController() {

    var self = this;

    self.message = "Hello World!";

}

在您的html中，您可以在任何元素中使用此指令。

<div class="icon-like" click-like></div>

Answer 3

您需要传递$event并在click事件中捕获$event event。 然后，您可以使用$event.target来访问元素。

示例片段：

 angular.module("myApp", []) .controller("myController", function($scope) { $scope.clickLike = function($event) { angular.element($event.target).toggleClass("hello") } }) 

 .hello { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="icon-like" ng-app="myApp" ng-controller="myController" ng-click="clickLike($event)">Hello</div>