javascript - AngularJS ngCloak not working -


i have post category page should show message if there no posts. it's showing html when page loads , hiding it. ngcloak sounds should job i'm not having luck it. here's html in template file:

  <div ng-show="data.posts.length == 0" ng-cloak>     <div class="no-posts">       <h2>coming soon</h2>       <p>sorry there posts here yet, check soon.</p>     </div>   </div>

here's css i've added sass file. tried adding directly css on page did not work:

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

what missing? should simple right?

edit: added html head , didn't work:

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

ng-cloack directive works in way expect it. not hide html, show once template becomes compiled. reason template compilation in browser takes time upon ugly template without data shown user. hide uncompiled template need add ng-cloak class (to make invisible) , ng-cloack directive show after template compilation. problem describe here has solution: have add 'ng-hide' class element, , hidden until expression ng-show wont take 'true' value.

window.settimeout(function() {    angular.module('demo', [])     .controller('democontroller', ['$timeout', function($timeout) {       var vm = this;            vm.isloaded = true;    }]);  angular.bootstrap(document, ['demo']);  }, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  <div ng-controller="democontroller vm">  <div>message below appear in 3 seconds</div>  <div class="ng-hide" ng-show="vm.isloaded">data loaded</div>  </div>


-

Comments

Post a Comment

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

angular - Is it possible to get native element for formControl? -

i've got angular2 reactive form . created formcontrol s , assigned input fields by [formcontrol]=... . understand creates nativeelement <-> formcontrol link. my question: possible nativeelement formcontrol ? wanna myformcontrol.nativeelement.focus() i can share 1 terrible solution works me. in reactive forms can use either 1) formcontroldirective ts mycontrol = new formcontrol('') template <input type="text" [formcontrol]="mycontrol"> or 2) formcontrolname ts myform: formgroup; constructor(private fb: formbuilder) {} ngoninit() { this.myform = this.fb.group({ foo: '' }); } template <form [formgroup]="myform"> <input type="text" formcontrolname="foo"> </form> so these directives write patch like 1) formcontroldirective const originformcontrolngonchanges = formcontroldirective.prototype.ngonchanges; formcontroldirective.proto
Read more

javascript - Why jQuery Select box change event is now working? -

i working on product filters user select select box according his/her preference not getting selected value user in jquery. html code:- <select name="product_filter" id="product_filter"> <option value="price_low_first">price : low high</option> <option value="price_high_first">price : high low</option> <option value="latest">latest</option> <option value="popular">most popular</option> </select> jquery code: $(function () { $("#product_filter").change(function () { alert("hi") var selectedtext = $(this).find("option:selected").text(); var selectedvalue = $(this).val(); alert("selected text: " + selectedtext + " value: " + selectedvalue); }); }); hi believe code perfect. once please check jquery.min.js
Read more