Question

我最近开始开发一个带有提交表单的简单网页。最初，我使用HTML，CSS和jQuery引导来接近它，以动画我的元素（timepickers，datepickers，下拉列表和文件上传者）。然后我意识到我想使用Angular将我的表单改为多步形式一切顺利，我设法按照教程改变我的表单，并使用Angular应用程序注入不同的视图。但是，加载到我的索引页面中的Javascripts都没有工作，因为它们在Angular之前加载了＃34;在DOM准备好的＃34;之后。我通过创建Angular指令来模拟jQuery元素，阅读了不同的方法来解决这个问题我想知道解决这个问题的正确方法是什么。人们似乎经常建议不要混合使用jQuery和Angular。在Angular完成所有操作后，有没有办法加载javascripts？或者这是不好的做法，应该避免吗？

Answer 1

这是一个有效的问题，而且这是一个新的Angular开发人员经常遇到的常见问题。我们使用jQuery引导程序一直创建多个表单视图。我创造了一个回答你的问题。简而言之，大多数时候Angular没有在DOM准备好之前完成呈现/执行代码，快速的方法是将您的代码放在控制器中的setTimeout中，这样您就可以快速操作表单。一种正确的方法是创建一个指令来操纵你的表单。

http://plnkr.co/edit/l9YmHEO8kMxjZTp92k08?p=preview

angular.module('MyApp',[]).controller('MyCtrl', function($scope){
    $scope.data = ['aaa','bbb','ccc'];    

    var count = $('#list li').length; 
    $('#beforeTimeout').text('there are ' + count + ' items');

    // now the items are rendered
    setTimeout(function(){
        var count = $('#list li').length; 
        $('#afterTimeout').text('there are ' + count + ' items');
    },1);
});

Answer 2

我不同意@Lance，setTimeout是将Angular与jQuery同步的最佳选择。

Angular中已有一项功能，允许在文档就绪事件之后执行代码。

您可以将$document注入控制器并使用：

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

或注入$element：

angular.element($element).ready(function() { ... }

我分叉了@Lance plnkr（代码为+1）并更新了示例： http://plnkr.co/edit/NYrcFWTdLtk245BPCX93?p=preview

将jQuery与AngularJS集成？

2 个答案: