Home > Developer > JavaScript
Jquery operates angularjs objects
This article focuses on jquery's operations on angularjs objects. For more information, see
Jquery is a very powerful js framework, and angularjs is a very powerful front-end mvc framework. Although any one of the frameworks is enough in the project, sometimes the two frameworks need to be used together, although not recommended. But sometimes it is very convenient to use a mixture. Don't consider that much. As long as you can implement functions, why not?
A recently developed product uses angularjs at the front end, but the table framework uses jquery. datatables. js. Of course, the interaction between jquery and angularjs is inevitable. Because of the company's confidentiality, I don't need to demonstrate real projects. Write a small demo. Of course, real projects are much more complicated.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<! DOCTYPE html> <Html ng-app = "ngDemo"> <Head> <Title> </title> <Script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <Script src = "// www. w3cschool. cc/try/angularjs/1.2.5/angular. min. js"> </script> <Script type = "text/javascript"> $ (Function (){ $ ('# Btn'). on ('click', function (e ){ $ ('# Dv2'). text (Number ($ (' # dv2'). text () + 1); // jquery + angular implementation $ ('# Dv3'). text (Number ($ (' # dv3'). text () + 1); // jquery-only implementation }); });
Var app = angular. module ('ngdemo', []); App. controller ('ngctrl ', [' $ scope ', function ($ scope ){ $ Scope. test1 = 0; $ Scope. test2 = 0; }]); </Script> </Head> <Body ng-controller = "ngCtrl"> Test1: <div id = "dv1" >{{ test1 }}</div> <! -- Pure angular implementation --> Test2: <div id = "dv2" ng-bind = "test2" ng-model = "test2"> </div> Test3: <div id = "dv3"> 0 </div> <Button id = "btn" ng-click = "test1 = test1 + 1"> click me + 1 </button> </Body> </Html> |
Code
Effect
Click twice, and the three values are added to 2. It seems that there is no problem.
Is that all right? See
The view is 2, the model is 0, and the synchronization is not implemented. What should I do?
So the question comes again. Which of the following is jquery and angularjs strong?
Change code
?
| 1 2 3 4 5 6 |
$ ('# Btn'). on ('click', function (e ){ Var scope = angular. element ('# dv2'). scope (); // jquery + angular implementation Scope. test2 = scope. test2 + 1; // directly modify the value of test2 Console. log (scope. test2 ); $ ('# Dv3'). text (Number ($ (' # dv3'). text () + 1); // jquery-only implementation }); |
Let's take a look.
Click it twice, and the one in the middle is 1, and the other two are 2.
After three clicks, the middle part is changed to 2, but what is the value of scope. test2? How does it always show a slow beat?
Change again
?
| 1 2 3 4 5 6 7 |
$ ('# Btn'). on ('click', function (e ){ Var scope = angular. element ('# dv2'). scope (); // jquery + angular implementation Scope. test2 = scope. test2 + 1; // directly modify the value of test2 Scope. $ apply (); // bind to view Console. log (scope. test2 ); $ ('# Dv3'). text (Number ($ (' # dv3'). text () + 1); // jquery-only implementation }); |
Let's take a look.
Now all three are synchronized. Traditional Chinese medicine is good and Western medicine is fast! Jquery is simple, angularjs is convenient, and the combination of the two is achieved.
Note: The scope object must call $ apply (). Otherwise, the view and model are not synchronized.
The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
