Các yếu tố Angularjs - ng-cloak / ng-show nhấp nháy

Tôi có một vấn đề trong angular.js với directive / class ng-cloakhoặc ng-show.

Chrome hoạt động tốt, nhưng Firefox đang gây ra các yếu tố với ng-cloakhoặc ng-show. IMHO nó gây ra bởi quá trình chuyển đổi ng-cloak/ ng-showthành style="display: none;", có lẽ trình biên dịch javascript của Firefox chậm hơn một chút, vì vậy các yếu tố xuất hiện một lúc rồi ẩn đi?

Thí dụ:

<ul ng-show="foo != null" ng-cloak>..</ul>

Mặc dù tài liệu không đề cập đến nó, nhưng có thể không đủ để thêm display: none;quy tắc vào CSS của bạn. Trong trường hợp bạn đang ở đâu bốc angular.js trong cơ thể hoặc các mẫu không được biên soạn sớm đủ, sử dụng các ng-cloakchỉ thị và bao gồm những điều sau đây trong CSS của bạn:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

Như đã đề cập trong bình luận, điều !importantquan trọng. Ví dụ: nếu bạn có đánh dấu sau

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

và bạn tình cờ đang sử dụng bootstrap.css, bộ chọn sau đây cụ thể hơn cho ng-cloakphần tử ed của bạn

.nav > li > a {
  display: block;
}

Vì vậy, nếu bạn bao gồm một quy tắc đơn giản display: none;, quy tắc của Bootstrap sẽ được ưu tiên và displaysẽ được đặt thành block, vì vậy bạn sẽ thấy nhấp nháy trước khi mẫu biên dịch.

Như đã đề cập trong tài liệu , bạn nên thêm một quy tắc vào CSS của mình để ẩn nó dựa trên ng-cloakthuộc tính:

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

Chúng tôi sử dụng các thủ thuật tương tự trên trang web "Được xây dựng với góc", mà bạn có thể xem nguồn của Github: https://github.com/angular/builtwith.angularjs.org

Mong rằng sẽ giúp!

Đảm bảo AngularJS được bao gồm trong headHTML. Xem tài liệu ngCloak :

Để có kết quả tốt nhất, tập lệnh angular.js phải được tải trong phần đầu của tệp html; cách khác, quy tắc css (ở trên) phải được bao gồm trong biểu định kiểu bên ngoài của ứng dụng.

Tôi chưa bao giờ gặp nhiều may mắn khi sử dụng ngCloak. Tôi vẫn bị chập chờn bất chấp mọi thứ đã nói ở trên. Cách chắc chắn duy nhất để tránh flicking là đưa nội dung của bạn vào một mẫu và bao gồm mẫu. Trong một SPA, HTML duy nhất sẽ được đánh giá trước khi được Angular biên dịch là trang index.html chính của bạn.

Chỉ cần lấy mọi thứ bên trong cơ thể và dán nó vào một tệp riêng biệt và sau đó:

<ng-include src="'views/indexMain.html'"></ng-include>

Bạn sẽ không bao giờ nhận được bất kỳ nhấp nháy theo cách đó vì Angular sẽ biên dịch mẫu trước khi thêm nó vào DOM.

ngBind và ngBindTemplate là những lựa chọn thay thế không yêu cầu CSS:

<div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>

Ngoài câu trả lời được chấp nhận nếu bạn đang sử dụng một phương pháp khác để kích hoạt ng-cloak ...

Bạn cũng có thể muốn thêm một số đặc tính bổ sung vào CSS / LESS của mình:

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

Tôi đã có một vấn đề tương tự và phát hiện ra rằng nếu bạn có một lớp có chứa các hiệu ứng chuyển tiếp, phần tử sẽ nhấp nháy. Tôi đã cố gắng thêm ng-cloak nhưng không thành công, nhưng bằng cách loại bỏ quá trình chuyển đổi, nút dừng nhấp nháy.

Tôi đang sử dụng khung ion và phác thảo nút có sự chuyển đổi này

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

Chỉ cần ghi đè lên lớp để loại bỏ quá trình chuyển đổi và nút sẽ dừng nhấp nháy.

Cập nhật

Một lần nữa trên ion có một nhấp nháy khi sử dụng ng-show / ng-hide. Thêm CSS sau giải quyết nó:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

Nguồn: http://forum.ionicframework.com/t/beta-14-ng- leather-show / 14470/9

Tôi đã gặp một vấn đề trong đó <div ng-show="expression">ban đầu sẽ hiển thị trong một phần của giây, mặc dù "biểu thức" ban đầu là sai, trước khi chỉ thị ng-show có cơ hội chạy.

Giải pháp tôi đã sử dụng là thêm thủ công lớp "ng-hide", như trong <div ng-show="expression" ng-hide>, để đảm bảo nó bắt đầu ẩn. Lệnh ng-show sẽ thêm / xóa lớp ng-hide khi cần thiết sau đó.

Hãy cố gắng tắt Firebird . Tôi nghiêm túc đấy Điều này giúp trong trường hợp của tôi.

Áp dụng câu trả lời được chấp nhận và sau đó đảm bảo rằng Firebird trong Firefox của bạn bị tắt : nhấn F12 sau đó tắt Fireorms cho trang này - nút nhỏ ở góc trên bên phải.

Thực tế có hai vấn đề riêng biệt có thể gây ra vấn đề nhấp nháy và bạn có thể phải đối mặt với một hoặc cả hai vấn đề này.

Vấn đề 1: ng-cloak được áp dụng quá muộn

Vấn đề này được giải quyết như được giải thích trong nhiều câu trả lời trên trang này là để đảm bảo AngularJS được tải trong đầu. Xem tài liệu ngCloak :

Để có kết quả tốt nhất, tập lệnh angular.js phải được tải trong phần đầu của tệp html; cách khác, quy tắc css (ở trên) phải được bao gồm trong biểu định kiểu bên ngoài của ứng dụng.

Vấn đề 2: ng-cloak bị loại bỏ quá sớm

Vấn đề này rất có thể xảy ra khi bạn có nhiều CSS trên trang của mình với các quy tắc xếp chồng lên nhau và các lớp CSS sâu hơn xuất hiện trước khi lớp trên cùng được áp dụng.

Các giải pháp jQuery trong các câu trả lời liên quan đến việc thêm style="display:none"vào phần tử của bạn sẽ giải quyết vấn đề này miễn là kiểu được loại bỏ đủ muộn (thực tế các giải pháp này giải quyết cả hai vấn đề). Tuy nhiên, nếu bạn không muốn thêm kiểu trực tiếp vào HTML, bạn có thể đạt được kết quả tương tự bằng cách sử dụng ng-show.

Bắt đầu với ví dụ từ câu hỏi:

<ul ng-show="foo != null" ng-cloak>..</ul>

Thêm quy tắc ng-show bổ sung cho thành phần của bạn:

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

(Bạn cần giữ lại ng-cloakđể tránh vấn đề 1).

Sau đó, trong bộ ứng dụng của bạn isPageFullyLoaded.

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$safeApply = function (fn) {
        $rootScope.isPageFullyLoaded = true;
    }
}]);

Xin lưu ý rằng tùy thuộc vào chính xác những gì bạn đang làm, app.run có thể hoặc không phải là nơi tốt nhất để đặt isPageFullyLoaded. Điều quan trọng là đảm bảo rằng nó isPageFullyLoadedđược đặt thành đúng sau bất cứ điều gì bạn không muốn nhấp nháy đã sẵn sàng để được tiết lộ cho người dùng.

Nghe có vẻ như Vấn đề 1 là vấn đề mà OP đang gặp phải, nhưng những người khác đang tìm thấy giải pháp đó không hoạt động hoặc chỉ hoạt động một phần vì họ cũng đang gặp phải Vấn đề 2 .

Lưu ý quan trọng: Đảm bảo áp dụng các giải pháp cho cả ng-cloak đang được áp dụng quá muộn VÀ loại bỏ sớm. Chỉ giải quyết một trong những vấn đề này có thể không làm giảm các triệu chứng.

Chúng tôi đã gặp vấn đề này tại công ty của chúng tôi và giải quyết nó bằng cách thêm "display: none" vào kiểu CSS cho các phần tử ng-show nhấp nháy. Chúng tôi không phải sử dụng ng-cloak. Không giống như những người khác trong chủ đề này, chúng tôi đã gặp phải sự cố này trong Safari nhưng không phải Firefox hay Chrome - có thể là do lỗi lặp lại lười biếng của Safari trong iOS7 .

Đối với những gì nó có giá trị, tôi đã có một vấn đề tương tự ng-cloak không hoạt động. Có thể đáng để kiểm tra ứng dụng / trang web của bạn với bộ đệm được kích hoạt để sử dụng lại các tệp nguồn để xem điều đó có giúp ích không.

Với sự cố của tôi với sự nhấp nháy, tôi đã thử nghiệm với DevTools mở và bộ nhớ cache bị vô hiệu hóa. Để bảng điều khiển đóng với bộ nhớ đệm được kích hoạt đã khắc phục sự cố của tôi.

Giữ các câu dưới đây trong thẻ head đã khắc phục vấn đề này

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
</style>

tài liệu chính thức

Tôi không thể làm cho bất kỳ phương pháp nào trong số này hoạt động, vì vậy cuối cùng tôi đã làm như sau. Đối với phần tử bạn muốn ẩn ban đầu:

<div <!--...--> style="display: none;" ng-style="style">

Sau đó, trong bộ điều khiển của bạn, thêm phần này vào hoặc gần trên cùng:

$scope.style = { display: 'block' };

Bằng cách này, phần tử ban đầu bị ẩn và chỉ hiển thị khi mã điều khiển đã thực sự chạy.

Bạn có thể điều chỉnh vị trí theo nhu cầu của bạn, có thể thêm một số logic. Trong trường hợp của tôi, tôi chuyển sang đường dẫn đăng nhập nếu hiện tại chưa đăng nhập và không muốn giao diện của tôi nhấp nháy trước, vì vậy tôi đã đặt $scope.stylesau kiểm tra đăng nhập.

Tốt hơn là sử dụng ng-ifthay vì ng-show. ng-if loại bỏ hoàn toàn và tạo lại phần tử trong DOM và giúp tránh hiện tượng nhấp nháy.

Tôi đang sử dụng khung ion, thêm kiểu css có thể không hoạt động trong một số trường hợp nhất định, bạn có thể thử sử dụng ng-if thay vì ng-show / ng-hide

ref: https://books.google.com.vn/books?id=-__C_CwAAQBAJ & = onepage & q = ng-show% 20 leather% 20flickering% 20in% 20ios & f = false

bạn muốn tham khảo tài liệu góc tốt hơn, vì phiên bản [1.4.9] đã cập nhật xuống bên dưới để có thể hỗ trợ chỉ thị dữ liệu-ng-cloak.

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

Tôi đã thử giải pháp ng-cloak ở trên nhưng nó vẫn có vấn đề không liên tục với Firefox. Cách giải quyết duy nhất có hiệu quả với tôi là trì hoãn việc tải biểu mẫu cho đến khi Angular được tải đầy đủ.

Tôi chỉ cần thêm ng-init trong ứng dụng và sử dụng ng-if ở phía biểu mẫu để kiểm tra xem biến tôi đặt đã được tải chưa.

<div ng-app="myApp" ng-init="loaded='yes'"> 
   <form ng-if="loaded.length > 0">
      <!--all my elements here-->
   </form>
</div>

Ngoài các câu trả lời khác, nếu bạn thấy đèn flash của mã mẫu vẫn xảy ra, có khả năng bạn có các tập lệnh của bạn ở cuối trang và điều đó có nghĩa là lệnh ng-cloak thẳng lên sẽ không hoạt động. Bạn có thể di chuyển tập lệnh của mình lên đầu hoặc tạo quy tắc CSS.

Các tài liệu nói "Để có kết quả tốt nhất, tập lệnh angular.js phải được tải trong phần đầu của tài liệu html; thay vào đó, quy tắc css ở trên phải được đưa vào biểu định kiểu bên ngoài của ứng dụng."

Bây giờ, nó không phải là một bản định kiểu bên ngoài mà chỉ là một phần tử trong đầu.

<style type="text/css">
  .ng-cloak {
    display: none !important;
  }
</style>

nguồn: https://docs.angularjs.org/api/ng/directive/ngCloak

Tôi đã thử mọi giải pháp được đăng ở đây và vẫn bị nhấp nháy trong Firefox.

Nếu nó giúp được bất cứ ai, tôi đã giải quyết nó bằng cách thêm style="display: none;"vào div nội dung chính, sau đó sử dụng jQuery (tôi đã sử dụng nó trên trang) $('#main-div-id').show();một khi mọi thứ đã được tải sau khi nhận dữ liệu từ máy chủ;

Tôi thực sự đã tìm thấy đề xuất từ Nhật ký web của Rick Strahl đã khắc phục vấn đề của tôi một cách hoàn hảo (vì tôi vẫn gặp vấn đề kỳ lạ với ng-cloak nhấp nháy thô {{code}}, đặc biệt là trong khi chạy Fireorms):

Tùy chọn hạt nhân: Ẩn nội dung theo cách thủ công

Sử dụng CSS rõ ràng là sự lựa chọn tốt nhất, vì vậy những điều sau đây không cần thiết. Nhưng tôi sẽ đề cập đến nó ở đây vì nó cung cấp một số cái nhìn sâu sắc về cách bạn có thể ẩn / hiển thị nội dung theo cách thủ công khi tải cho các khung khác hoặc trong các mẫu dựa trên đánh dấu của riêng bạn.

Trước khi tôi nhận ra rằng tôi có thể nhúng rõ ràng kiểu CSS vào trang, tôi đã cố gắng tìm hiểu tại sao ng-cloak không làm việc của nó. Sau khi lãng phí một giờ không đi đến đâu, cuối cùng tôi quyết định chỉ ẩn thủ công và hiển thị container. Ý tưởng rất đơn giản - ban đầu ẩn container, sau đó hiển thị nó sau khi Angular đã xử lý ban đầu và xóa đánh dấu mẫu khỏi trang.

Bạn có thể ẩn thủ công nội dung và hiển thị nội dung đó sau khi Angular có quyền kiểm soát. Để làm điều này tôi đã sử dụng:

<div id="mainContainer" class="mainContainer boxshadow"
    ng-app="app" style="display:none">

Lưu ý màn hình: không có kiểu nào ẩn rõ ràng phần tử ban đầu trên trang.

Sau đó, một khi Angular đã chạy khởi tạo và xử lý hiệu quả đánh dấu mẫu trên trang bạn có thể hiển thị nội dung. Đối với Angular, sự kiện 'sẵn sàng' này là hàm app.run ():

app.run( function ($rootScope, $location, cellService) {        
    $("#mainContainer").show();
    …
});

Điều này có hiệu quả loại bỏ màn hình: không có kiểu dáng và nội dung hiển thị. Vào thời điểm app.run () kích hoạt, DOM đã sẵn sàng để hiển thị với dữ liệu đầy hoặc ít nhất là dữ liệu trống - Angular đã giành quyền kiểm soát.

Tôi đã thử tất cả các câu trả lời ở trên và không có gì hiệu quả. Sử dụng ion để phát triển một ứng dụng lai và đã cố gắng để làm cho một thông báo lỗi không nhấp nháy. Tôi đã kết thúc việc giải quyết vấn đề của mình bằng cách thêm một lớp ng-hide vào phần tử của tôi. Div của tôi đã có ng-show để hiển thị phần tử khi có lỗi. Thêm ng-hide đặt div không hiển thị trước khi tải góc. Không có ng-cloak hoặc thêm góc vào đầu cần thiết.

NHƯ từ các cuộc thảo luận ở trên

[ng-cloak] {
                display: none;
            }

là cách hoàn hảo để giải quyết vấn đề.

Tôi đang sử dụng ng-show trong một chỉ thị để hiển thị và ẩn cửa sổ bật lên.

<div class="..." ng-show="showPopup">

Không có cái nào ở trên làm việc cho tôi, và sử dụng ng-if thay vì ng-show sẽ là một việc quá mức. Điều đó có nghĩa là loại bỏ và thêm toàn bộ nội dung bật lên vào DOM mỗi lần nhấp chuột. Thay vào đó tôi đã thêm một ng-if vào cùng một phần tử để đảm bảo nó không hiển thị khi tải tài liệu:

<div class="..." ng-show="showPopup" ng-if="popupReady">

Sau đó tôi đã thêm phần khởi tạo vào bộ điều khiển chịu trách nhiệm về lệnh này với thời gian chờ:

$timeout(function () {
    $scope.popupReady = true;
});

Bằng cách này, tôi đã loại bỏ sự cố nhấp nháy và tránh hoạt động tốn kém của việc chèn DOM mỗi lần nhấp. Điều này có chi phí sử dụng hai biến phạm vi cho cùng một mục đích thay vì một, nhưng cho đến nay đây chắc chắn là lựa chọn tốt nhất.

Đã thử ng-cloaknhưng vẫn chớp mắt. Dưới đây mã loại bỏ chúng hoàn toàn.

<body style="display:none;" ng-style="{'display':'block'}">

Không có giải pháp nào được liệt kê ở trên làm việc cho tôi. Sau đó, tôi quyết định xem xét chức năng thực tế và nhận ra rằng khi phạm vi của $. Vì vậy, trong mã tôi đặt và oldValue và newValue sau đó

$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});

Về cơ bản khi scope.watch được kích hoạt trong trường hợp này, AngularJS theo dõi các thay đổi đối với biến tên (model.value)

Tôi sẽ sẽ quấn <ul>với một<div ng-cloak>

Cá nhân tôi quyết định sử dụng ng-classthuộc tính chứ không phải là ng-show. Tôi đã thành công hơn rất nhiều khi đi theo con đường này, đặc biệt là đối với các cửa sổ bật lên luôn không được hiển thị theo mặc định.

Những gì đã từng <div class="options-modal" ng-show="showOptions"></div>

Hiện tại là: <div class="options-modal" ng-class="{'show': isPrintModalShown}">

với CSS cho lớp tùy chọn phương thức display: nonetheo mặc định. Lớp chương trình chứa display:blockCSS.

Tránh ngắt dòng

<meta http-equiv="Content-Security-Policy"              content="
default-src 'FOO';   
script-src 'FOO';    
style-src  'FOO'; 
font-src 'FOO';">

Hoạt động với Firefox 45.0.1

<meta http-equiv="Content-Security-Policy"              content="    default-src 'FOO';    script-src 'FOO';     style-src  'FOO';    font-src 'FOO';">