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

1153 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.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

jquery exploite les objets angulairesjs_AngularJS