Jquery operates angularjs objects and jqueryangularjs

Jquery operates angularjs objects and jqueryangularjs

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.

<! DOCTYPE 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
$ ('# Btn '). on ('click', function (e) {var scope = angular. element ('# dv2 '). scope (); // jquery + angular implement scope. test2 = scope. test2 + 1; // directly modify the value of test2 console. log (scope. test2); $ ('# dv3 '). text (Number ($ ('# dv3 '). text () + 1); // pure jquery 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
$ ('# Btn '). on ('click', function (e) {var scope = angular. element ('# dv2 '). scope (); // jquery + angular implement scope. test2 = scope. test2 + 1; // directly modify the scope value of test2. $ apply (); // bind to the view console. log (scope. test2); $ ('# dv3 '). text (Number ($ ('# dv3 '). text () + 1); // pure jquery 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.