Question

plnkr - 我有一个按钮，用于切换body元素上的类toggled。

我已经创建了一个指令，当toggled类被分配给当前不起作用的body元素时打开警报。

但是如果我删除了body元素上的toggled类，则警报会起作用。

我可以告诉我为什么会这样吗？

当我创建一个引用动态添加类的元素的指令时，为什么它正在工作？

提前致谢。

Answer 1

首先，要动态注册点击处理程序，您必须使用jQuery.on：

的不同语法

而不是这个

  $('toggled > .alert').click(function() {
    alert("Yes!");
  })

使用此

  $(document).on('click', 'toggled > .alert', function() {
    alert("Yes!");
  })

另外，如果你想为你的指令注册的元素显示单独的对话框，你必须在元素本身上注册click handler并检查它是否符合选择器：

link: function(scope, element) {
  element.on('click', function() {
    if (jQuery(this).is('.toggled > .alert')) {
      alert("Yes!");
    }
  });
}

Answer 2

在指令中，您需要做的就是触发警报;

app.directive('openAlert', function() {

  return {
    restrict: 'A',
    link: function(scope, element) {
      $(element).click(function() {
        if ($(element).parent().hasClass('toggled')) alert("Yes!");
      })
    }
  }

})

以下是演示：http://plnkr.co/edit/IuL5Z4yQgIfVy6AtId4L?p=preview

Answer 3

您可以在不使用jQuery的情况下解决此问题。看看下面的解决方案。

无需在toggle指令上设置ng-init，在控制器中设置它。
在锚标记

ng-click

在指令中声明alert函数并在ng-click上调用它，这样就无需使用jquery
在alert功能中，在触发提醒之前检查scope.toggle是true还是false。

<强> HTML

<body ng-controller="MainCtrl" ng-class="{toggled: toggle}">
    <p>Hello {{name}}!</p>
    <button ng-click="toggle = !toggle">Toggle Class</button>
    <a href="#" ng-click="alert()" open-alert>Open the alert box!</a>
</body>

<强> JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function ($scope) {
    $scope.name = 'World';
    $scope.toggle = !$scope.toggle;
});

app.directive('openAlert', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            scope.alert = function () {
                if (!!scope.toggle) {
                    alert('Yes!');
                }
            };
        }
    }
});

<强> JSFIDDLE

angularjs - 指令不适用于动态添加的类

3 个答案: