AngularJS與其它框架的混用(jQuery, Dojo) · AngularJS學習筆記

# 16. AngularJS與其它框架的混用(jQuery, Dojo) 這個問題似乎很多人都關心，但是事實是，如果了解了 ng 的工作方式，這本來就不是一個問題了。在我自己使用 ng 的過程當中，一直是混用 jQuery 的，以前還要加上一個 Dojo 。只要了解每種框架的工作方式，在具體的代碼中每個框架都做了什么事，那么整體上控制起來就不會有問題。回到 ng 上來看，首先對于 jQuery 來說，最開始說提到過，在 DOM 操作部分， ng 與 jQuery 是兼容的，如果沒有 jQuery ， ng 自己也實現了兼容的部分 API 。同時，最開始也提到過， ng 的使用最忌諱的一點就是修改 DOM 結構——你應該使用 ng 的模板機制進行數據綁定，以此來控制 DOM 結構，而不是直接操作。換句話來說，在不動 DOM 結構的這個前提之下，你的數據隨便怎么改，隨便使用哪個框架來控制都是沒問題的，到時如有必要使用 `$scope.$digest()` 來通知 ng 一下即可。下面這個例子，我們使用了 jQuery 中的 _Deferred_ ( `$.ajax` 就是返回一個 _Deferred_ )，還使用了 ng 的 _$timeout_ ，當然是在 ng 的結構之下： 1 <!DOCTYPE html> 2 <html ng-app="Demo"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>AngularJS</title> 6 </head> 7 <body> 8 9 <div ng-controller="TestCtrl"> 10 <span ng-click="go()">{{ a }}</span> 11 </div> 1213 <script type="text/javascript" 14 src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 15 </script> 16 <script type="text/javascript" 17 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"> 18 </script> 1920 <script type="text/javascript"> 21 var app = angular.module('Demo', [], angular.noop); 22 app.controller('TestCtrl', function($scope, $timeout){ 23 $scope.a = '點擊我開始'; 2425 var defer = $.Deferred(); 26 var f = function(){ 27 if($scope.a == ''){$scope.a = '已停止'; return} 28 defer.done(function(){ 29 $scope.a.length < 10 ? $scope.a += '>' : $scope.a = '>'; 30 $timeout(f, 100); 31 }); 32 } 33 defer.done(function(){$scope.a = '>'; f()}); 3435 $scope.go = function(){ 36 defer.resolve(); 37 $timeout(function(){$scope.a = ''}, 5000); 38 } 39 }); 40 </script> 41 </body> 42 </html> 再把 Dojo 加進來看與 DOM 結構相關的例子。之前說過，使用 ng 就最好不要手動修改 DOM 結構，但這里說兩點： 1. 對于整個頁面，你可以只在局部使用 ng ，不使用 ng 的地方你可以隨意控制 DOM 。 1. 如果 DOM 結構有變動，你可以在 DOM 結構定下來之后再初始化 ng 。下面這個例子使用了 _AngularJS_ ， _jQuery_ ， _Dojo_ ： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>AngularJS</title> 6 <link rel="stylesheet" 7 href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen" /> 8 </head> 9 <body class="claro"> 1011 <div ng-controller="TestCtrl" id="test_ctrl"> 1213 <p ng-show="!btn_disable"> 14 <button ng-click="change()">調用dojo修改按鈕</button> 15 </p> 1617 <p id="btn_wrapper"> 18 <button data-dojo-type="dijit/form/Button" type="button">{{ a }}</button> 19 </p> 2021 <p> 22 <input ng-model="dialog_text" ng-init="dialog_text='對話框內容'" /> 23 <button ng-click="dialog(dialog_text)">顯示對話框</button> 24 </p> 2526 <p ng-show="show_edit_text" style="display: none;"> 27 <span>需要編輯的內容:</span> 28 <input ng-model="text" /> 29 </p> 3031 <div id="editor_wrapper"> 32 <div data-dojo-type="dijit/Editor" id="editor"></div> 33 </div> 3435 </div> 363738 <script type="text/javascript" 39 src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"> 40 </script> 41 <script type="text/javascript" 42 src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 43 </script> 44 <script type="text/javascript" 45 src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"> 46 </script> 4748 <script type="text/javascript"> 4950 require(['dojo/parser', 'dijit/Editor'], function(parser){ 51 parser.parse($('#editor_wrapper')[0]).then(function(){ 52 var app = angular.module('Demo', [], angular.noop); 5354 app.controller('TestCtrl', function($scope, $timeout){ 55 $scope.a = '我是ng, 也是dojo'; 56 $scope.show_edit_text = true; 5758 $scope.change = function(){ 59 $scope.a = 'DOM結構已經改變(不建議這樣做)'; 60 require(['dojo/parser', 'dijit/form/Button', 'dojo/domReady!'], 61 function(parser){ 62 parser.parse($('#btn_wrapper')[0]); 63 $scope.btn_disable = true; 64 } 65 ); 66 } 6768 $scope.dialog = function(text){ 69 require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){ 70 var dialog = new Dialog({ 71 title: "對話框哦", 72 content: text, 73 style: "width: 300px" 74 }); 75 dialog.show(); 76 }); 77 } 7879 require(['dijit/registry'], function(registry){ 80 var editor = registry.byId('editor'); 81 $scope.$watch('text', function(new_v){ 82 editor.setValue(new_v); 83 }); 84 }); 8586 }); 8788 angular.bootstrap(document, ['Demo']); 89 }); 9091 }); 9293 </script> 94 </body> 95 </html>