AngularJS行動開發中的坑-js教程-PHP中文網

首頁

web前端

js教程

AngularJS行動開發中的坑

高洛峰

Nov 18, 2016 am 11:52 AM

angularjs

相對來說，Jquery側重DOM操作，AngularJS是以視圖模型和雙向綁定為核心的。

DOM作業的問題

避免使用 jQuery 操作 DOM，包括增加元素節點，移除元素節點，取得元素內容，隱藏或顯示元素。你應該使用 directives 來實現這些動作，有必要的話你還要編寫自己的 directives。

在網站Web前端開發中，如果你感到很難改變習慣，那麼考慮從你的網頁中移除 jQuery 吧。真的，AngularJS 中的 $http 服務非常強大，基本上可以取代jQuery 的ajax 函數，而且AngularJS 內嵌了jQLite ?? 它內部實現的一個jQuery 子集，包含了常用的jQuery DOM 操作方法，事件綁定等等。但這並不是說用了AngularJS 就不能用 jQuery 了。如果你的網頁有載入 jQuery 那麼 AngularJS 會優先採用你的 jQuery，否則它會 fall back 到 jQLite。

如果是行動App或行動Web開發，建議不要引入Jquery了，如果實在需要jquery的某些功能，引入Zepto.js吧。不過請相信我，用了AngularJS，你不會需要Jquery的！

需要自己寫 directives 的情況通常是當你使用了第三方的 jQuery 插件。因為插件在 AngularJS 之外對表單值進行更改，並不能即時反應到 Model 中。例如我們用比較多的 jQueryUI datepicker 插件，當你選取一個日期後，插件會將日期字串填到 input 輸入框。 View 改變了，卻沒有更新 Model，因為$('.datepicker').datepicker(); 這段程式碼不屬於 AngularJS 的管理範圍。我們需要寫一個directive 來讓 DOM 的改變即時更新到 Model 裡。

var directives = angular.module(&#39;directives&#39;, []);
 
directives.directive(&#39;datepicker&#39;, function() {
   return function(scope, element, attrs) {
       element.datepicker({
           inline: true,
           dateFormat: &#39;dd.mm.yy&#39;,
           onSelect: function(dateText) {
               var modelPath = $(this).attr(&#39;ng-model&#39;);
               putObject(modelPath, scope, dateText);
               scope.$apply();
           }
       });
   }
});

登入後複製

接著在 HTML 中引入這個 directive

<input type="text" datepicker ng-model="myObject.myDateValue" />

登入後複製

Directive 就是在 HTML 裡寫自訂的標籤屬性，達到插件的作用，有效補充了HTML的功能。這種聲明式的語法擴展了 HTML。建議專案中通用的功能和頁面元件，都封裝成Directive，方便使用和程式碼維護。

需要說明的是，有一個 AngularUI 專案提供了大量的 directive 給予我們使用，包括 Bootstrap 框架中的插件以及基於 jQuery 的其他很熱門的 UI 元件。 AngularJS 的社群現在很活躍，生態系統健全。

ngOption 中的 value

這是一個大坑。如果你去看 ngOption 產生的