雙向資料繫結 ngModelController

[toc]

注：如果想在input顯示乙個值，然後實際上是另乙個值的話，有多種方法，思路就是element.val()用來顯示用於展示的值，model的值可以用

參考官網（需要翻牆）

假如我們現在需要編寫兩個指令，在linking函式中有很多重合的方法，為了避免重複自己（著名的dry原則），我們可以將這個重複的方法寫在第三個指令的controller中，然後在另外兩個需要的指令中require這個擁有controller欄位的指令，最後通過linking函式的第四個引數就可以引用這些重合的方法。**的結構大致如下：

return ;

this.method2 = function();

},...

}}); return ,

...}

}); return ,

...}

});

所以link的第四個引數就是required的指令對應的ctrl

先看看例子：

指令：

angular.module('customcontrol', )
.directive('contenteditable', function() ;
// 監聽change事件來開啟繫結
element.on('blur keyup change', function() );
read(); // 初始化
// 將資料寫入model
function read() 
ngmodel.$setviewvalue(html);}}
};});

ngmodelcontroller方法

ngmodelcontroller屬性

將要執行的函式的陣列，無論什麼時候控制器從dom中讀取了乙個值，它都將作為乙個管道。其中的函式依次被呼叫，並將結果傳遞給下乙個。最後出來的值將會被傳遞到model中。其中將包括驗證和轉換值的過程。對於驗證步驟，這個解析器將會使用$setvalidity方法，對於不合格的值將返回undefined。

乙個包含即將執行函式的陣列，無論什麼時候model的值發生了變化，它都會作為乙個管道。其中的每乙個函式都被依次呼叫，並將結果傳遞給下乙個函式。該函式用於將模型傳遞給檢視的值進行格式化。

ng-model-options，就是可以實現對延遲更新、如何觸發更新、時區（timezone針對input[type='date']等）等的控制

//github上的block-example/表單操作-11/ng-model-options.html
angular.module('option***ample', )
.controller('examplecontroller', ['$scope', function($scope) ;
$scope.cancel = function(e) 
};}]);

user.name =

$rollbackviewvalue(); $commitviewvalue(); $addcontrol(); $removecontrol(); $setvalidity(); $setdirty(); $setpristine(); $setuntouched(); $setsubmitted();

屬性：

$pristine(form沒被動過)  $dirty(form被動過) $valid(全部驗證通過) $invalid(驗證不通過) $submitted  $error
email、max、maxlength、min、minlength、number、pattern、required、url、date、datetimelocal、time、week、month

方法：

$render(); $isempty(value); $setvalidity(validationerrorkey, isvalid); $setpristine(); $setdirty(); $setuntouched(); $settouched(); $rollbackviewvalue(); $validate(); $commitviewvalue(); $setviewvalue(value, trigger);

擁有的屬性:

$viewvalue //介面顯示的資料 $modelvalue //$scope上面的value $parsers //在view->model的時候會觸發的乙個函式組，無論什麼時候model發生改變，所有的ngmodelcontroller.$formatters(model發生改變時觸發資料有效驗證和格式化轉變)陣列中的function將排隊執行，所以在這裡每乙個function都有機會去格式化model的值，並且通過ngmodelcontroller.$setvalidity修改空間的驗證狀態。 $formatters //在model->view的時候會觸發的乙個函式組，無論任何時候使用者與控制項發生互動，將會觸發ngmodelctroller.$setviewvalue。這時候輪到執行ngmodelcontroller.$parsers(當控制項從dom取值之後，將會執行這個陣列中的所有方法，對值進行審查過濾或轉換，也進行驗證)陣列中的所有方法。 $validators $asyncvalidators $viewchangelisteners $error $pending $untouched $touched $pristine $dirty $valid $invalid

$name

雙向繫結的機制可以在$parsers和$formatters可以體現出來，通過這些我們可以在view->scope做類似表單驗證（自定義）的功能（配合$setvalidity(validationerrorkey, isvalid);），scope->view資料格式自定義等操作（配合$setviewvalue(value, trigger);），可以看一下下面的這個例子:

表單操作-11/ng-model.html

var custom = angular.module('customcontrol', ['ngsanitize']);
custom.directive("noxiaobin", function ()  else 
});}
}});
custom.directive('contenteditable', ['$sce', function($sce) ;
//對element的監聽
element.on('blur keyup change', function() );
read(); // 初始化
// write data to the model
function read() 
ngmodel.$setviewvalue(html); //獲取viewvalue，設定$viewvalue}}
};}]);

雙向資料繫結 ngModelController

雙向資料繫結

雙向資料繫結

資料雙向繫結原理

相關推薦