在angularjs模板中的jQuery目标元素,不会触发

Question

我有一个角度应用程序,它在索引中加载,不同的模板与ng-view.在索引中,我加载了所有脚本文件(angular和jquery),包括main.js文件,其中包含我编写的jQuery代码.如果我使用jQuery从索引文件中定位元素,一切正常,但如果我将模板中的元素作为目标,则jQuery不起作用.

如果我使用firebug调试jQuery并在click函数的开头放置一些断点,并且在函数内部,代码可以工作.

如果我将标签放在模板中,使用jQuery代码,代码就可以了.

这是我尝试运行的jquery代码:

$('.text-down-arrow').click(function () {
    $('.text-up-arrow').removeClass('hidden');
});

我尝试将main.js文件中的所有内容包装为:

    (function ($) {
        $(document).ready(function () {...});
    })(jQuery);

或没有$(document).ready(function(){});

任何人都知道是什么导致这个或我是否应该在每个模板中加载jquery？

Answer 1

Jquery 不会解决这个问题。因为当时文件已经准备好了。带有箭头的 HTML 尚未出现。角度在某个点设置视图

所以你想以有角度的方式触发点击ng-click

将点击附加到 html 元素 <div ng-class="{hidden: isHidden}" ng-click="{ toggleHidden() }">
创建一个函数来切换要使用的 varng-class $scope.toggleHidden = function () { $scope.isHidden = !$scope.isHidden; }