如何将jQuery与Angular链接？ 我想要这个简单的jQuery代码来动画所有my20 + div

Question

Basically trying to animated my 25+ divs (square blocks, regular height width 100px bg-color: blue) but in angular because I have three routes. I want my homepage to have the animation. I will figure that out. But for now, I want to link this code below into my angular app. Do I put it in the controller? Make a new script.js file and link it?

$(document).ready(function() { 
    $('.blockone').mouseenter(function() {
        $(this).animate({
            height: '+=40px'
        });
    });
    $('div').mouseleave(function() {
        $(this).animate({
            height: '-=40px'
        });
    });
    $('div').click(function() {
        $(this).toggle(200);
    });
});

Answer 1

To use jQuery, simply ensure it is loaded before the angular.js file. You can also use the ngJq directive to specify that jqlite should be used over jQuery, or to use a specific version of jQuery if multiple versions exist on the page.

Answer 2

you haven't shared enough code to be able to say exactly whether your solution would work.

assuming you have synchronous script references to your angular controller right before the closing body tag, leaving it in your controller may execute but this is frowned upon and cannot be reused in other controllers without repeating the code. you could have this code in a service, and inject it in the controller.

if you wanted to load it as a separate file, you could load it asynchronously with jqlite's $http or jQuery $.ajax.