ホームページ > 記事 > ウェブフロントエンド > jquery は angularjs オブジェクトを操作します_AngularJS

jquery は angularjs オブジェクトを操作します_AngularJS

WBOYオリジナル: 2016-05-16 15:52:351153ブラウズ

jquery は非常に強力な js フレームワークであり、angularjs は非常に強力なフロントエンド mvc フレームワークです。プロジェクトではこれらのフレームワークのいずれかを使用するだけで十分ですが、推奨されませんが、2 つのフレームワークを混合する必要がある場合があります。しかし、機能を達成できるのであれば、あまり考えずに併用すると便利な場合もあります。

最近作ったプロダクトはフロントエンドにangularjsを使用していますが、テーブルフレームワークにはjquery.datatables.jsを使用しています。もちろん、jqueryとangularjsの間の相互作用には必然的に問題が発生します。会社の機密保持のため、実際のプロジェクトのデモは使用せず、小さなデモを作成します。もちろん、実際のプロジェクトはさらに複雑です。

<!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>

コード

効果

2回クリックすると、これら3つの値はすべて2に増えますが、問題ないようです。

本当に大丈夫ですか？

をご覧ください。

ビューは 2、モデルはまだ 0、同期が達成されていません。どうすればよいですか?

それでは、jquery と angularjs のどちらが優れているのかという質問がまた出てきます。

コードを変更します

$('#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实现
    });

もう一度見てください

2回クリックすると、真ん中が1になり、残りの2つが2になりました。

3 回クリックすると、真ん中の値が 2 に変わりましたが、scope.test2 の値が常に 1 拍遅く表示されるのはなぜですか?

もう一度変更します

$('#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实现
    });

もう一度見てください

これで 3 つすべてが同期されました。漢方は良くて、西洋医学は早い、中医学と漢方の組み合わせ！ jquery はシンプル、angularjs は便利、この 2 つを組み合わせれば完了です。

注: スコープオブジェクトは $apply() を呼び出す必要があります。そうしないと、ビューとモデルが同期しなくなります。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jQuery_jqueryに基づくカラーサークルの回転例次の記事：jQuery_jqueryに基づくカラーサークルの回転例

続きを見る

jquery は angularjs オブジェクトを操作します_AngularJS

関連記事