AngularJS 與其它框架的混用(jQuery, Dojo)

2018-07-26 17:12 更新

這個問題似乎很多人都關(guān)心，但是事實是，如果了解了 ng 的工作方式，這本來就不是一個問題了。

在我自己使用 ng 的過程當中，一直是混用 jQuery 的，以前還要加上一個 Dojo 。只要了解每種框架的工作方式，在具體的代碼中每個框架都做了什么事，那么整體上控制起來就不會有問題。

回到 ng 上來看，首先對于 jQuery 來說，最開始說提到過，在 DOM 操作部分， ng 與 jQuery 是兼容的，如果沒有 jQuery ， ng 自己也實現(xiàn)了兼容的部分 API 。

同時，最開始也提到過， ng 的使用最忌諱的一點就是修改 DOM 結(jié)構(gòu)——你應該使用 ng 的模板機制進行數(shù)據(jù)綁定，以此來控制 DOM 結(jié)構(gòu)，而不是直接操作。換句話來說，在不動 DOM 結(jié)構(gòu)的這個前提之下，你的數(shù)據(jù)隨便怎么改，隨便使用哪個框架來控制都是沒問題的，到時如有必要使用 $scope.$digest() 來通知 ng 一下即可。

下面這個例子，我們使用了 jQuery 中的 Deferred ( $.ajax 就是返回一個 Deferred )，還使用了 ng 的 $timeout ，當然是在 ng 的結(jié)構(gòu)之下：

<!DOCTYPE html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
</head>
<body>

<div ng-controller="TestCtrl">
  <span ng-click="go()">{{ a }}</span>
</div>

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" rel="external nofollow"  rel="external nofollow" >
</script>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js" rel="external nofollow"  rel="external nofollow" >
</script>

<script type="text/javascript">
var app = angular.module('Demo', [], angular.noop);
app.controller('TestCtrl', function($scope, $timeout){
  $scope.a = '點擊我開始';

  var defer = $.Deferred();
  var f = function(){
    if($scope.a == ''){$scope.a = '已停止'; return}
    defer.done(function(){
      $scope.a.length < 10 ? $scope.a += '>' : $scope.a = '>';
      $timeout(f, 100);
    });
  }
  defer.done(function(){$scope.a = '>'; f()});

  $scope.go = function(){
    defer.resolve();
    $timeout(function(){$scope.a = ''}, 5000);
  }
});
</script>
</body>
</html>

再把 Dojo 加進來看與 DOM 結(jié)構(gòu)相關(guān)的例子。之前說過，使用 ng 就最好不要手動修改 DOM 結(jié)構(gòu)，但這里說兩點：

  • 對于整個頁面，你可以只在局部使用 ng ，不使用 ng 的地方你可以隨意控制 DOM 。
  • 如果 DOM 結(jié)構(gòu)有變動，你可以在 DOM 結(jié)構(gòu)定下來之后再初始化 ng 。

下面這個例子使用了 AngularJS ， jQuery ， Dojo ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<link rel="stylesheet"
   rel="external nofollow" target="_blank"  media="screen" />
</head>
<body class="claro">

<div ng-controller="TestCtrl" id="test_ctrl">

  <p ng-show="!btn_disable">
    <button ng-click="change()">調(diào)用dojo修改按鈕</button>
  </p>

  <p id="btn_wrapper">
    <button data-dojo-type="dijit/form/Button" type="button">{{ a }}</button>
  </p>

  <p>
    <input ng-model="dialog_text" ng-init="dialog_text='對話框內(nèi)容'" />
    <button ng-click="dialog(dialog_text)">顯示對話框</button>
  </p>

  <p ng-show="show_edit_text" style="display: none;">
    <span>需要編輯的內(nèi)容:</span>
    <input ng-model="text" />
  </p>

  <div id="editor_wrapper">
    <div data-dojo-type="dijit/Editor" id="editor"></div>
  </div>

</div>


<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" rel="external nofollow" >
</script>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" rel="external nofollow"  rel="external nofollow" >
</script>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js" rel="external nofollow"  rel="external nofollow" >
</script>

<script type="text/javascript">

require(['dojo/parser', 'dijit/Editor'], function(parser){
  parser.parse($('#editor_wrapper')[0]).then(function(){
    var app = angular.module('Demo', [], angular.noop);

    app.controller('TestCtrl', function($scope, $timeout){
      $scope.a = '我是ng, 也是dojo';
      $scope.show_edit_text = true;

      $scope.change = function(){
        $scope.a = 'DOM結(jié)構(gòu)已經(jīng)改變(不建議這樣做)';
        require(['dojo/parser', 'dijit/form/Button', 'dojo/domReady!'],
          function(parser){
            parser.parse($('#btn_wrapper')[0]);
            $scope.btn_disable = true;
          }
        );
      }

      $scope.dialog = function(text){
        require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
          var dialog = new Dialog({
              title: "對話框哦",
              content: text,
              style: "width: 300px"
          });
          dialog.show();
        });
      }

      require(['dijit/registry'], function(registry){
        var editor = registry.byId('editor');
        $scope.$watch('text', function(new_v){
          editor.setValue(new_v);
        });
      });

    });

    angular.bootstrap(document, ['Demo']);
  });

});

</script>
</body>
</html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號