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 - 控制器应仅包含业务逻辑。将任何表示逻辑放入控制器会显着影响   它的可测试性。 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并捕获$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>

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

3 个答案: