jquery exploite les objets angulairesjs_AngularJS-js tutoriel-php.cn

jquery exploite les objets angulairesjs_AngularJS

WBOY

Libérer： 2016-05-16 15:52:35

original

1171 Les gens l'ont consulté

jquery est un framework js très puissant, et angulairejs est un framework mvc frontal très puissant. Bien que l’utilisation de l’un de ces frameworks soit suffisante pour le projet, il est parfois nécessaire de mélanger les deux frameworks, même si cela n’est pas recommandé. Mais parfois, c'est très pratique lorsqu'il est utilisé ensemble. N'y pensez pas trop, tant que cela peut remplir la fonction, pourquoi ne pas le faire ?

Un produit que j'ai récemment créé utilise angulairejs pour le front-end, mais jquery.datatables.js est utilisé pour le framework de table. Bien sûr, il y a inévitablement des problèmes avec l'interaction entre jquery et angulairejs. En raison de la confidentialité de l'entreprise, je n'utiliserai pas la démonstration réelle du projet et n'écrirai pas une petite démo. Bien sûr, le vrai projet est beaucoup plus compliqué.

<!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实现
      $('#dv3').text(Number($('#dv3').text())+1);//纯jquery实现
    });
  });
  
  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><!--纯angular实现-->
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>

Copier après la connexion

Code

Effet

Après avoir cliqué deux fois, ces trois valeurssont toutes augmentées à 2, ce qui ne semble poser aucun problème.

Est-ce que ça va vraiment ? Veuillez consulter

La vue est à 2, le modèle est toujours à 0, la synchronisation n'est pas réalisée, que dois-je faire ?

Ensuite, la question revient : lequel est le meilleur, jquery ou angulairejs ?

Changer le code

$('#btn').on('click',function(e) {
      var scope=angular.element('#dv2').scope();//jquery+angular实现
      scope.test2=scope.test2+1;//直接修改test2的值
      console.log(scope.test2);
      $('#dv3').text(Number($('#dv3').text())+1);//纯jquery实现
    });

Copier après la connexion

Regardez encore

Après avoir cliqué deux fois, celui du milieu est devenu 1 et les deux autres sont devenus 2.

Après avoir cliqué 3 fois, celui du milieu est passé à 2, mais quelle est la valeur de scope.test2 Pourquoi affiche-t-il toujours un battement plus lent ?

Changez-le à nouveau

$('#btn').on('click',function(e) {
      var scope=angular.element('#dv2').scope();//jquery+angular实现
      scope.test2=scope.test2+1;//直接修改test2的值
      scope.$apply();//绑定到视图
      console.log(scope.test2);
      $('#dv3').text(Number($('#dv3').text())+1);//纯jquery实现
    });

Copier après la connexion

Regardez encore

Maintenant, tous les trois sont synchronisés. La médecine chinoise est bonne, la médecine occidentale est rapide, une combinaison de médecine chinoise et de médecine traditionnelle chinoise ! jquery est simple, angulairejs est pratique, combinez les deux... et vous avez terminé.

Remarque : l'objet scope doit appeler $apply(), sinon la vue et le modèle seront désynchronisés.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.