2012-11-08 47 views
5

Tôi đã sử dụng angularJs cho chức năng thực sự đơn giản trên trang web hiện tại.angularjs đặt giá trị mặc định để hiển thị trước khi đánh giá

nó là một cái gì đó như thế này

<div ng-app> 
    <div ng-controller="TermsController"> 
     <input type="checkbox" ng-model="terms.agree" /> 
     <input type="submit" value="{{terms.label}}" .. /> 
    </div> 
</div> 

tôi cắm góc ở giữa trang và tất cả mọi thứ đang làm việc tốt, ngoại trừ một thực tế rằng tải góc khá chậm và người sử dụng có thể xem {{}} terms.label cho một lúc trước khi góc đánh giá giá trị của nó.

tôi đã cố gắng để làm một cái gì đó giống như

<input type="submit" value="Default value" ng-model="terms.label" .. /> 

nhưng nó không bao giờ cập nhật giá trị của nút gửi. dù sao tôi sẽ đặt cược tôi đã nhìn thấy một cái gì đó như thế này, nhưng có lẽ lĩnh vực đầu vào là không có thuộc tính giá trị và chỉ có mô hình.

bất kỳ hướng dẫn nào về cách thiết lập mẫu trước khi tải trọng angularJs được đánh giá cao.

Tôi biết rằng tôi có thể đặt một số trình tải trước và thay thế nó khi góc đã được tải, nhưng đối với nhiệm vụ đơn giản này, nó có vẻ là quá mức cần thiết.

nhờ sự giúp đỡ

Trả lời

8

tốt nhất những gì bạn có thể làm với các phiên bản hiện tại của AngularJS là chúng tôi chỉ thị ng-bind. Từ tài liệu của nó:

Khi kịch bản trong đó việc sử dụng các ngBind được ưa thích hơn {{ biểu}} ràng buộc là khi đó là mong muốn đưa các ràng buộc vào mẫu mà là trong giây lát hiển thị bởi trình duyệt trong tình trạng nguyên của nó trước khi Angular biên dịch nó. Vì ngBind là thuộc tính phần tử, nó làm cho các ràng buộc vô hình đối với người dùng trong khi trang đang tải.

Để thực hiện ng-bind làm việc trong trường hợp của bạn, bạn sẽ phải thay đổi thẻ input để một thẻ button như vậy:

<div ng-controller="TermsController"> 
    <input type="checkbox" ng-model="terms.agree"> 
    <button type="submit" ng-bind="terms.label">Before</button> 
</div> 

Đây là một jsFiddle làm việc: http://jsfiddle.net/TL33r/2/

Bạn có thể sử dụng ng-cloak (xem another question để biết thêm thông tin) nhưng ng-cloak sẽ ẩn toàn bộ phần tử DOM (và con của nó) trong khi tôi tin rằng bạn đã yêu cầu có giá trị "mặc định" được thay đổi thành một ràng buộc khi AngularJS đá vào.

+0

ok trả lời câu hỏi của tôi nhưng nó có vẻ như một giải pháp thay vì một giải pháp chung. Tôi đoán angularJs được thiết kế cho các trang web động hơn, nơi hiển thị tải trước và chuyển chế độ xem trên kết thúc khởi tạo góc –

10

Bạn có thể ẩn các yếu tố với các thuộc tính ng-cloak trong quá trình tải:

<div ng-app> 
    <div ng-controller="TermsController" ng-cloak> 
     <input type="checkbox" ng-model="terms.agree" /> 
     <input type="submit" value="{{terms.label}}" .. /> 
    </div> 
</div> 

tham khảo: http://docs.angularjs.org/api/ng.directive:ngCloak

Các vấn đề liên quan