Home > Developer > Web Develop
jquery is a very powerful JS framework, Angularjs is a very bull front-end MVC framework. Although using any of these frameworks is sufficient for the project, sometimes the two frameworks need to be mixed, although not recommended. But sometimes mixed, but very convenient, do not consider so much, as long as the function can be achieved, why not?
Recently done a product, the front end with ANGULARJS, but the table framework with the jquery.datatables.js, of course, there is no problem of jquery and angularjs interaction. Because of the company's secrecy, I don't need a real project demo, write a small demo, of course, the real project is much more complex.
1 <!DOCTYPE HTML>2 <HTMLNg-app= "Ngdemo">3 <Head>4 <title></title>5 <Scriptsrc= "Http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></Script>6 <Scriptsrc= "//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></Script>7 <Scripttype= "Text/javascript">8 $(function() {9 $('#btn'). On ('Click',function(e) {Ten $('#dv2'). Text (number ($ ('#dv2'). Text ())+1);//Jquery+angular Implementation One $('#dv3'). Text (number ($ ('#dv3'). Text ())+1);//Pure jquery Implementation A }); - }); - the varapp=Angular.module ('Ngdemo',[]); - App.controller ('Ngctrl',['$scope',function($scope) { - $scope. Test1=0; - $scope. Test2=0; + }]); - </Script> + </Head> A <BodyNg-controller= "Ngctrl"> atTest1:<DivID= "Dv1">{{test1}}</Div><!--Pure Angular Implementation - -Test2:<DivID= "Dv2"Ng-bind= "Test2"Ng-model= "Test2"></Div> -TEST3:<DivID= "Dv3">0</Div> - <ButtonID= "BTN"Ng-click= "Test1=test1+1">Click Me +1</Button> - </Body> - </HTML>
Code
Effect
Point two times, these three values are added to 2, seemingly no problem.
Is that really okay? Please look
Is the view on 2,model or 0, no synchronization is implemented, what should I do?
So the question comes again, which is jquery and Angularjs?
Change the Code
$ (' #dv3 '). Text (Number ($ (' #dv3 '). Text ()) +1);//Pure jquery implementation 6 });Look again.
Point 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 shot?
Change again
$ (' #btn '). On (' click ', Function (e) { var scope=angular.element (' #dv2 '). scope ();//jquery+angular implementation scope.test2=scope.test2+1;//directly modifies the value of the Test2 scope. $apply ();//bind to view Console.log (scope.test2); $ (' #dv3 '). Text (Number ($ (' #dv3 '). Text ()) +1);//Pure jquery Implementation });Look again.
All three of these are in sync. Chinese medicine is good, Western medicine fast, in this combination! jquery is simple, angularjs convenient, both combine ... Done.
Note: The scope object must be called $apply (), otherwise the view will appear out of sync with the model.
If you feel that it helps, please order a praise, thank you!
Deficiencies and mistakes, please criticize!
A powerful combination of jquery operations Angularjs objects
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
