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('directives', []);
 
directives.directive('datepicker', function() {
   return function(scope, element, attrs) {
       element.datepicker({
           inline: true,
           dateFormat: 'dd.mm.yy',
           onSelect: function(dateText) {
               var modelPath = $(this).attr('ng-model');
               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 產生的  中的  的選項值（每個   的 value 部分），那絕對是枉費心機。因為這裡的值永遠都會 是 AngularJS 內部元素的索引，並不是你所指定的表單選項值。

   還是要轉換觀念，AngularJS 已經不再用表單進行資料互動了，而是用 Model。使用 $http 來提交 Model，在 php 中則使用 file_get_contents('php://input') 來取得前端提交的資料。

Input type='number'的問題

AngularJS有些版本,當輸入框設為 Input type='number'時，在行動裝置上ng-change方法會失效。

{{ }} 的問題

在頁面初始化的時候，使用者可能會看到 {{ }}，然後閃爍一下才出現真正的內容。
解決方法：

使用 ng-cloak directive 來隱藏它
使用 ng-bind 替代 {{ }}

將介面與業務邏輯分離

Controller 不應該直接引用 DOM，而應該控制 view 的行為。例如“如果用戶操作了X，應該發生什麼事情”，“我從哪裡可以獲得X？”

Service 在大部分情況下也不應該直接引用DOM，它應該是一個單例（singletons），獨立於介面，與view 的邏輯無關。它的角色只是「做 X 操作」。

DOM 操作應該放在 directives 裡面。

盡量復用已有功能

你所寫的功能很可能 AngularJS 已經實現了，有一些代碼是可以抽像出來復用的，使用更 Angular 的方式。總之就是很多 jQuery 的繁瑣程式碼可以被取代。

1. ng-repeat

ng-repeat 很有用。當 Ajax 從伺服器取得資料後，我們經常使用 jQuery （例如上面講過的範例） 在某些 HTML 容器節點中加入更多的元素，這在 AngularJS 裡是不好的做法。有了 ng-repeat 一切就變得非常簡單了。在你的 $scope 中定義一個數組 （model） 來保存從伺服器拉取的數據，然後使用 ng-repeat 將它與 DOM 綁定即可。下面的範例初始化定義了 friends 這個 model

<div ng-init="friends = [{name:&#39;John&#39;, age:25}, {name:&#39;Mary&#39;, age:28}]">
    I have {{friends.length}} friends. They are:
    <ul>
        <li ng-repeat="friend in friends">
            [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
        </li>
    </ul>
</div>

2. ng-show

 

ng-show 也很有用。使用 jQuery 来根据条件控制界面元素的显示隐藏，这很常见。但是 Angular 有更好的方式来做到这一点。ng-show （以及 ng-hide） 可以根据布尔表达式来决定隐藏和显示。

对于数组或字符串，可以用strXXXX.length控制显示，否则在移动设备上会不正常。

类似的内置 directives 还有 ng-disabled， ng-switch 等等，用于条件控制，语法简洁，都很强大。

3. ng-class

ng-class 用于条件性地给元素添加 class，以前我们也经常用 jQuery 来实现。Angular 中的 ng-class 当然更好用了，例子：

...

在这里 ng-class 接受一个 object 对象，key 为 CSS class 名，值为 $scope 变量控制的条件表达式，其他类似的内置 directives 还有 ng-class-even 和 ng-class-odd，很实用。

ng-show和ng-if的使用场景问题

使用ng-show和ng-if都实现控制页面元素显示的功能，但2者是不同的，ng-if会动态创建DOM，ng-show只是切换已有DOM的显示，相当于设置style="display:none"，如果使用before和after等css伪类控制显示效果，可能会出现问题，需要根据情况合理使用ng-show和ng-if。

$watch 和 $apply

AngularJS 的双向数据绑定是最令人兴奋的特性了，然而它也不是全能的魔法，在某些情况下你需要做一些小小的修正。

当你使用 ng-model， ng-repeat 等等来绑定一个元素的值时， AngularJS 为那个值创建了一个 $watch，只要这个值在 AngularJS 的范围内有任何改变，所有的地方都会同步更新。而你在写自定义的 directive 时，你需要定义你自己的 $watch 来实现这种自动同步。

有时候你在代码中改变了 model 的值，view 却没有更新，这在自定义事件绑定中经常遇到。这时你就需要手动调用 scope.$apply() 来触发界面更新。上面 datepicker 的例子已经说明了这一点。第三方插件可能会有 call back，我们也可以把回调函数写成匿名函数作为参数传入$apply()中。

将 ng-repeat 和其他 directives 结合起来

ng-repeat 很有用，不过它和 DOM 绑定了，很难在同一个元素上使用其他 directives （比如 ng-show， ng-controller 等等）。

如果你想对整个循环使用某个 directive，你可以在 repeat 外再包一层父元素把 directive 写在那儿；如果你想对循环内部的每一个元素使用某个 directive，那么把它放到 ng-repeat 的一个子节点上即可。

Scope的问题

Scope 在 templates 模板中应该是 read-only 的，而在 controller 里应该是 write-only 的。Scope 的目的是引用 model，而不是成为 model。model 就是我们定义的 JavaScript 对象。

$rootScope 是可以用的，不过很可能被滥用

Scopes 在 AngularJS 中形成一定的层级关系，树状结构必然有一个根节点。通常我们用不到它，因为几乎每个 view 都有一个 controller 以及相对应的自己的 scope。

但偶尔有一些数据我们希望全局应用在整个 app 中，这时我们可以将数据注入 $rootScope。因为其他 scope 都会继承 root scope，所以那些注入的数据对于 ng-show 这类 directive 都是可用的，就像是在本地 $scope 中的变量一样。

当然，全局变量是邪恶的，你必须很小心地使用 $rootScope。特别是不要用于代码，而仅仅用于注入数据。如果你非常希望在 $rootScope 写一个函数，那最好把它写到 service 里，这样只有用到的时候它才会被注入，测试起来也方便些。

相反，如果一个函数的功能仅仅是存储和返回一些数据，就不要把它创建成一个 service。

子作用域的原型继承问题

       辛酸泪，这个也是个大坑。作用域变量的继承是基于javascript原型继承机制的，在使用涉及到作用域的指令如ng-template，ion-modal等时需要特别注意，相关的查找顺序这里就不细说了。