ฉันสร้างคำสั่งที่ออกแบบมาเพื่อแนบกับองค์ประกอบโดยใช้คำสั่ง ngModel หากค่าของโมเดลตรงกับค่าบางอย่าง ค่าควรตั้งค่าเป็นค่าก่อนหน้า ในตัวอย่างของฉัน ฉันกำลังมองหา "foo" และตั้งค่ากลับเป็นค่าก่อนหน้าหากนั่นคือสิ่งที่พิมพ์ไว้
การทดสอบหน่วยของฉันผ่านได้ดีในเรื่องนี้เพราะพวกเขาดูเฉพาะค่าโมเดลเท่านั้น อย่างไรก็ตาม ในทางปฏิบัติ DOM จะไม่อัปเดตเมื่อมีการทริกเกอร์ "put back" การคาดเดาที่ดีที่สุดของเราที่นี่คือการตั้งค่าเก่า == ใหม่จะป้องกันไม่ให้เช็คสกปรกเกิดขึ้น ฉันทำตามขั้นตอน $setViewValue และดูเหมือนว่าจะทำสิ่งที่ควรทำ อย่างไรก็ตาม มันจะไม่อัปเดต DOM (และสิ่งที่คุณเห็นในเบราว์เซอร์) จนกว่าฉันจะเรียก ngModel.$render() อย่างชัดเจนหลังจากตั้งค่าใหม่ มันใช้งานได้ดี แต่ฉันแค่อยากจะดูว่ามีวิธีที่เหมาะสมกว่านี้หรือไม่
โค้ดอยู่ด้านล่าง นี่คือซอที่มีเหมือนกัน
angular.module('myDirective', [])
.directive('myDirective', function () {
return {
restrict: 'A',
terminal: true,
require: "?ngModel",
link: function (scope, element, attrs, ngModel) {
scope.$watch(attrs.ngModel, function (newValue, oldValue) {
//ngModel.$setViewValue(newValue + "!");
if (newValue == "foo")
{
ngModel.$setViewValue(oldValue);
/*
I Need this render call in order to update the input box; is that OK?
My best guess is that setting new = old prevents a dirty check which would trigger $render()
*/
ngModel.$render();
}
});
}
};
});
function x($scope) {
$scope.test = 'value here';
}