Javascript angularjs-指令不适用于动态添加的类
-我有一个按钮，可以在body元素上切换类Javascript angularjs-指令不适用于动态添加的类,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,-我有一个按钮，可以在body元素上切换类 我已经创建了一个指令，当toggled类被分配给当前不工作的body元素时，它会打开一个警报 但是，如果我删除body元素上的toggled类，则警报确实有效 我能告诉我为什么会这样吗 当我创建一个引用到动态添加类的元素的指令时，它为什么工作 提前感谢。首先，要动态注册单击处理程序，必须使用不同的jQuery语法。在上： 而不是这个 $('toggled > .alert').click(function() { alert("Yes
我已经创建了一个指令，当toggled
类被分配给当前不工作的body元素时，它会打开一个警报
但是，如果我删除body元素上的toggled
类，则警报确实有效
我能告诉我为什么会这样吗
当我创建一个引用到动态添加类的元素的指令时，它为什么工作
提前感谢。首先，要动态注册单击处理程序，必须使用不同的jQuery语法。在
上：
而不是这个
$('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!");
}
});
}
在指令内部，触发警报所需做的只是
app.directive('openAlert', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).click(function() {
if ($(element).parent().hasClass('toggled')) alert("Yes!");
})
}
}
})
演示如下：您可以不用jQuery解决这个问题。查看下面的解决方案
无需在ng init
指令上设置toggle
，在控制器中进行设置
在锚定标记上使用ng单击
指令
在指令中声明一个alert
函数，并在ng单击时调用它，这样就不需要jQUery了
在触发警报之前，在警报
功能中检查范围切换
是否为真
或假
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>
为了避免此问题被关闭为“仅链接”，我建议您在问题中加入代码的相关部分。（假设与plunker的链接已断开，尝试阅读该问题）它一直有效。我希望它只在主体的类被切换时才工作。你检查了plunk吗？
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!');
}
};
}
}
});