Mẫu footer nhấp nháy ngay cả khi sử dụng ng-cloak trong AngularJS

Tôi tạo và hiển thị mẫu thành công với một số dữ liệu được lấy từ dịch vụ REST bằng AngularJS nhưng khi phản hồi JSON vẫn đang tải, trình duyệt hiển thị mẫu chân trang ở trên cùng và, khi phản hồi trả về dữ liệu JSON, chân trang sẽ chuyển xuống dưới cùng.Mẫu footer nhấp nháy ngay cả khi sử dụng ng-cloak trong AngularJS

Điều này xảy ra rất nhanh, nhưng mẫu chân trang nhấp nháy ở đầu trang trước khi chuyển xuống dưới cùng.

Tôi đã thử sử dụng phương pháp ng-cloak, thật không may, sự cố vẫn xảy ra. Tôi đặt CSS để ng-cloak theo đề nghị API Reference.

Đây là mã ứng dụng của tôi:

<body> 
    <div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div> 
    <div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div> 
    <div ng-view="main" ></div> 
    <footer class="nav" data-ng-include="'app/partials/footer.html'" ></footer>

tôi cố gắng đưa ng-áo choàng trên thẻ body, ng-view, chân, và cũng có thể bên trong ng-view template html. Mã này đại diện cho tất cả những nỗ lực (Lưu ý: Tôi đã cố gắng sử dụng riêng biệt và với nhau, với lớp ng-áo choàng và không)

<body ng-cloak class="ng-cloak"> 
    <div data-ng-controller="HeaderCtrl" data-ng-include="'app/partials/header.html'"></div> 
    <div data-ng-controller="MenuCtrl" data-ng-include="'app/partials/lista-menu.html'"></div> 
    <div ng-view="main" ng-cloak class="ng-cloak"></div> 
    <footer class="nav" data-ng-include="'app/partials/footer.html'" ng-cloak class="ng-cloak"></footer>

Đáng tiếc là sau khi tất cả những thay đổi này, các mẫu chân vẫn nhấp nháy trên đầu trước khi tải hoàn tất .

Bất kỳ ai cũng có thể giúp tôi khắc phục sự cố này?

Có bất kỳ mẹo Bootstrap nào để đặt chân trang ở dưới cùng, ngay cả khi div chính không có chiều cao? Tôi đã thử sử dụng thẻ nav-fixed-bottom nhưng tôi không muốn có đáy cố định trên màn hình khi trang có giá trị độ cao cao.

Xin cảm ơn !!!

Nguồn

2013-02-17 Deividi Cavarzan

ng-áo choàng và/hoặc ng-bind không thể giúp giải quyết vấn đề này, bởi vì đây không phải là vấn đề "flash của nội dung chưa được biên dịch". Những chỉ thị này nhằm ẩn nội dung cho đến khi Angular có cơ hội biên dịch HTML.

Sự cố bạn đang cố giải quyết giống như: "Tôi đang thêm nội dung vào trang động và nội dung đang di chuyển". Nếu bạn muốn hiển thị chân trang sau khi nội dung chính được tải, tôi thích giải pháp @Alex được trình bày trong nhận xét của anh ấy.

Nguồn

2013-02-19 15:44:27

Tôi đã thử nhưng vẫn nhấp nháy khi tải lại trong firefox ... – Sikander

Bạn đã kiểm tra kỹ liệu bạn có bất kỳ quy tắc CSS nào có thể xung đột với quy tắc ng-cloak không? Điều này có thể xảy ra với các phong cách, thư viện khác, v.v.

Nếu bạn có bất kỳ quy tắc xung đột nào, chỉ cần thêm display:none; có thể không đủ.

Xem Angularjs - ng-cloak/ng-show elements blink

Nếu đây là trường hợp, giải pháp là sử dụng quan trọng để khắc phục điều này:

[ng\:cloak], [ng-cloak], .ng-cloak { 
    display: none !important; 
}

Nguồn

2013-02-18 03:13:32

Cảm ơn sự giúp đỡ của bạn Alex. Tôi đọc tài liệu tham khảo của bạn, và khi tôi sẽ đặt thẻ quan trọng vào css, nó đã có sẵn! Tôi nghĩ rằng, vì có 2 mẫu được phân tách, mẫu chân trang hiển thị trước lần đầu tiên. Tôi đã cố gắng chạy ứng dụng không đồng bộ như vậy, nhưng vấn đề vẫn tồn tại. Giải pháp duy nhất mà tôi đã tìm thấy tại thời điểm này là đưa nội dung của chân trang vào trong chế độ xem chính của tôi, nhưng có lẽ đây không phải là cách thực hành tốt nhất vì tôi sẽ cần phải đặt mã đó trên mọi trang. –

Hmm vâng có ý nghĩa. Một cách tiếp cận khác để thử - thay vì ng-cloak, đặt ng-show, nhưng trên một biến phạm vi mà bạn chỉ đặt khi nội dung chính của bạn đã tải/yêu cầu đã hoàn thành v.v. - do đó bạn sẽ tự đặt khi chân trang xuất hiện. –

Giải pháp tốt nhất cho vấn đề này là bình luận này, có lẽ bạn có thể kết hợp nó vào câu trả lời của bạn, @AlexOsborn? – markus

Như Alex và Mark cho biết, ng-cloak không cung cấp bất kỳ lợi ích nào trong trường hợp này. Tuy nhiên tôi đã sử dụng một cái gì đó mà làm việc cho tôi và cũng có thể giúp đỡ người khác.

Ban đầu, tôi không hiển thị chân trang.

.footer { 
    display: none; 
}

sau đó sau khi Góc được thực hiện bằng cách tải nội dung, chân trang xuất hiện.

var app = angular.module('app', [...]) 
.run(function($rootScope) { 
    $rootScope.$on('$viewContentLoaded', function(event){ 
     $('.footer').fadeIn(500); 
    }); 
});

Nguồn

2015-03-24 14:46:03

Mẫu footer nhấp nháy ngay cả khi sử dụng ng-cloak trong AngularJS

Trả lời

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