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);

或没有$（文件）.ready（function（）{}）;

有人知道是什么原因造成的，或者我是否应该在每个模板中加载jquery？

Answer 1

Jquery不会这样做。因为在文件准备好的时候。带箭头的HTML还没有。 angular在某个点设置视图

所以你想用ng-click

以角度方式触发点击

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

Answer 2

正如Mihnea指出的那样，当您运行脚本时，您在事件处理程序中附加的元素并不存在于DOM中。

幸运的是，您可以使用.delegate（）来根据一组特定的根元素，为现在或将来与选择器匹配的所有元素的一个或多个事件附加处理程序。

http://api.jquery.com/delegate/

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

2 个答案: