角度ng-click功能并不总是触发

I have an Angular ng-click function that doesn't always fire.

我有一个Angular ng-click功能并不总是激发。

URL is here: http://430designs.com/xperience/black-label-app/deck.php

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

The function is clickLike here:

该功能是clickLike这里：

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

I'm calling it in the HTML like so:

我在HTML中调用它是这样的：

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

Check the link and you can debug in controller.js line 214. I'm not sure what's going on.

检查链接，你可以在controller.js第214行调试。我不知道发生了什么。

All help is greatly appreciated!

非常感谢所有帮助！

3 个解决方案

#1

You don't need the onclick method inside $scope.clickLike

你不需要$ scope.clickLike里面的onclick方法

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

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

e.currentTarget will be the element that triggers the event.

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

You also need to pass $event in you ng-click directive:

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

Here's an example: http://www.freedevelopertutorials.com/angularjs-tutorial/examples/angularjs-event-example/

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

#2

So you need to use a directive to manipulate your DOM... it is not best practice to manipulate DOM from the controller. Check this example out, I created a directive that is used as an attribute (just like ng-click) and applies a class to the element where this directive is an attribute of.

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

From the angular site:

从角度站点：

Use controllers to:

使用控制器：

Set up the initial state of the $scope object

设置$ scope对象的初始状态

Add behavior to the $scope object.

向$ scope对象添加行为。

Do not use controllers to:

不要使用控制器：

Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.

操纵DOM - 控制器应仅包含业务逻辑。将任何表示逻辑放入控制器会显着影响其可测试性。 Angular对大多数情况和指令进行数据绑定以封装手动DOM操作。

Format input — Use angular form controls instead.

格式输入 - 改为使用角度形式控件。

Filter output — Use angular filters instead. Share code or state across controllers — Use angular services instead.

滤镜输出 - 改为使用角度滤镜。跨控制器共享代码或状态 - 改为使用角度服务。

Manage the life-cycle of other components (for example, to create service instances).

管理其他组件的生命周期（例如，创建服务实例）。

Let me know if this helps: https://plnkr.co/edit/hyS5yxwajbJKSFYylKDw?p=preview

如果有帮助请告诉我：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!";

}

In your html you can use this directive in any element..not tightly couple to your controller..

在您的html中，您可以在任何元素中使用此指令。不要与您的控制器紧密耦合..

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

#3

You need to pass $event and capture $event in the click event. Then you can use $event.target to access the element.

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

Example Snippet:

示例代码段：

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>

#1