jquery Operations Angularjs Objects

Source: Internet
Author: User


This article mainly introduced the jquery Operation Angularjs object's related data, needs the friend to be possible to refer to under



jquery is a very powerful JS framework, Angularjs is a very bull's front-end MVC framework. Although using any of these frameworks is sufficient in the project, sometimes the two frameworks need to be mixed, although not recommended. But sometimes when mixing, but very convenient, do not consider so much, as long as can achieve function, why not?



Recently made a product, the front end with ANGULARJS, but the table framework with the jquery.datatables.js, of course, there is no need to encounter jquery and angularjs interaction problems. Because of the confidentiality of the company, I do not need to demonstrate the real project, write a small demo bar, of course, the real project is much more complicated.



Code



Effect



Point two times, these three values are added to 2, seemingly no problem.



Are you sure?



What if the view is 2,model or 0, and no synchronization is implemented?



So what's the problem with jquery and Angularjs?



Change the Code




$ (' #btn '). On (' click ', Function (e) {var scope=angular.element (' #dv2 '). scope ();//jquery+angular implementation scope.test2= scope.test2+1;//directly modifies the value of Test2 console.log (SCOPE.TEST2); $ (' #dv3 '). Text (Number ($ (' #dv3 '). Text ()) +1;//Pure jquery implementation});


Look again.



Two times, the middle one becomes 1, the other two is 2.



3 times, the middle one becomes 2, but what is the value of scope.test2, and how does it always show a slow beat?



and change it.




$ (' #btn '). On (' click ', Function (e) {var scope=angular.element (' #dv2 '). scope ();//jquery+angular implementation scope.test2= scope.test2+1;//directly modifies Test2 's value scope. $apply ();//bind to view Console.log (SCOPE.TEST2); $ (' #dv3 '). Text (Number ($ (' #dv3 '). Text ()) +1;//Pure jquery implementation});


Look again.



These three are synchronized. Chinese medicine is good, Western medicine is fast, the combination of!jquery simple, angularjs convenient, both ... Done.



Note: The scope object must invoke $apply (), otherwise the view and model will appear differently.



The above mentioned is the entire content of this article, I hope you can enjoy.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.