Cách góc
Cách Angular chính xác để làm điều này là viết một ứng dụng trang duy nhất, AJAX trong mẫu biểu mẫu, sau đó điền nó một cách linh hoạt từ mô hình. Mô hình không được điền từ biểu mẫu theo mặc định vì mô hình là nguồn duy nhất. Thay vào đó, Angular sẽ đi theo con đường khác và cố gắng điền vào mẫu từ mô hình.
Tuy nhiên, nếu bạn không có thời gian để bắt đầu lại từ đầu
Nếu bạn có một ứng dụng được viết, điều này có thể liên quan đến một số thay đổi kiến trúc khá nặng. Nếu bạn đang cố gắng sử dụng Angular để cải thiện một biểu mẫu hiện có, thay vì xây dựng toàn bộ ứng dụng một trang từ đầu, bạn có thể lấy giá trị từ biểu mẫu và lưu trữ trong phạm vi tại thời điểm liên kết bằng cách sử dụng một lệnh. Angular sau đó sẽ liên kết giá trị trong phạm vi trở lại biểu mẫu và giữ cho nó đồng bộ.
Sử dụng một chỉ thị
Bạn có thể sử dụng một lệnh tương đối đơn giản để kéo giá trị từ biểu mẫu và tải nó vào phạm vi hiện tại. Ở đây tôi đã định nghĩa một lệnh initFromForm.
var myApp = angular.module("myApp", ['initFromForm']);
angular.module('initFromForm', [])
.directive("initFromForm", function ($parse) {
return {
link: function (scope, element, attrs) {
var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
val = attrs.value;
if (attrs.type === "number") {val = parseInt(val)}
$parse(attr).assign(scope, val);
}
};
});
Bạn có thể thấy tôi đã xác định một vài dự phòng để có được một tên mô hình. Bạn có thể sử dụng lệnh này kết hợp với chỉ thị ngModel hoặc liên kết với thứ gì đó ngoài phạm vi $ nếu bạn thích.
Sử dụng nó như thế này:
<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}
Lưu ý điều này cũng sẽ hoạt động với textareas và chọn thả xuống.
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}