依賴内置ng-model指令的自定義指令

  ng-model是AngularJS的原生指令，通過require: 'ngModel'可以更加深入地處理資料的雙向資料綁定。

  ng-model裡面的屬性有：

  $parsers：儲存了從viewValue到modelValue綁定過程中的處理函數。

  $formatters：儲存了從modelValue到viewValue綁定過程中的處理函數。

  $setViewValue：當AngularJS外部發生某件事情的時候，需要調用這個函數才能讓AngularJS知道應該更新modelValue了。

  $render：設定當model發生變化時該如何去更新view。

  $setValidity：設定驗證結果。

  $viewValue：視圖裡的值。

  $modelValue：模型裡的值。

$parsers、$formatters和$setValidity的例子：

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code> <code>ng-app</code><code>=</code><code>"myModule"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>article</code> <code>ng-controller</code><code>=</code><code>"myController"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>form</code> <code>name</code><code>=</code><code>"myForm"</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>name</code><code>=</code><code>"evenInput"</code> <code>ng-model</code><code>=</code><code>"data.even"</code> <code>even&gt;</code>

<code>            </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>ng-model</code><code>=</code><code>"data.even"</code> <code>even&gt;</code>

<code>            </code><code>&lt;</code><code>section</code> <code>ng-show</code><code>=</code><code>"myForm.evenInput.$error.even"</code><code>&gt;</code>

<code>                </code><code>隻能為偶數</code>

<code>            </code><code>&lt;/</code><code>section</code><code>&gt;</code>

<code>        </code><code>&lt;/</code><code>form</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>article</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../JS/angular.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>    </code><code>angular.module('myModule', [])</code>

<code>        </code><code>.controller('myController', function() {</code>

<code>        </code><code>})</code>

<code>        </code><code>.directive('even', function() {</code>

<code>            </code><code>return {</code>

<code>                </code><code>require: 'ngModel',</code>

<code>                </code><code>link: function($scope, iElm, iAttrs, ngModelController) {</code>

<code>                    </code><code>ngModelController.$parsers.push(function(viewValue) { //parser-文法分析器</code>

<code>                        </code><code>if (viewValue % 2 === 0) {</code>

<code>                            </code><code>ngModelController.$setValidity('even', true); //.$error.even為false</code>

<code>                        </code><code>} else {</code>

<code>                            </code><code>ngModelController.$setValidity('even', false); //.$error.even為true</code>

<code>                        </code><code>}</code>

<code>                        </code><code>return viewValue;</code>

<code>                    </code><code>});</code>

<code>                    </code><code>ngModelController.$formatters.push(function(modelValue) {</code>

<code>                        </code><code>if (modelValue !== undefined) {</code>

<code>                            </code><code>modelValue = modelValue + ' some words';</code>

<code>                        </code><code>return modelValue;</code>

<code>                </code><code>}</code>

<code>            </code><code>};</code>

<code>        </code><code>});</code>

<code>    </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

$setViewValue、$render和$viewValue的例子：

<code>        </code><code>&lt;</code><code>my-content</code> <code>ng-model</code><code>=</code><code>"someText"</code><code>&gt;&lt;/</code><code>my-content</code><code>&gt;</code>

<code>        </code><code>.directive('myContent', function() {</code>

<code>                </code><code>restrict: 'E',</code>

<code>                </code><code>template: '&lt;</code><code>div</code> <code>contenteditable</code><code>=</code><code>"true"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;',</code>

<code>                </code><code>replace: true,</code>

<code>                    </code><code>iElm.on('keyup', function() {</code>

<code>                        </code><code>$scope.$apply(function() {</code>

<code>                            </code><code>ngModelController.$setViewValue(iElm.html());</code>

<code>                        </code><code>});</code>

<code>                    </code><code>ngModelController.$render = function() {</code>

<code>                        </code><code>iElm.html(ngModelController.$viewValue);</code>

<code>                    </code><code>}</code>

<code></code>

本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1672508，如需轉載請自行聯系原作者