Distinguish B/W ng-cloak/ng-show ?

Distinguish B/W ng-cloak/ng-show ?

Asked on October 16, 2018 in AngularJs.
Add Comment


  • 3 Answer(s)

        Despite the fact that the documentation doesn’t specify it, 

        In situations where you are stacking angular.js in the body or formats aren’t assembled soon enough, utilize the ng-shroud order and incorporate the accompanying in your CSS:

    /*
    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;
    }
    

    As said in the remark, the !imperative is essential. For instance, on the off chance that you have the accompanying markup

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

    what’s more, you happen to utilize bootstrap.css, the accompanying selector is more particular for your ng-cloak’ed component

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

    So in the event that you incorporate a manage with essentially show: none;, Bootstrap’s govern will come first and the show will be set to square, so you’ll see the gleam before the format accumulates.

     

    Answered on October 16, 2018.
    Add Comment

    ngBind and ngBindTemplate are alternatives that do not require 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>
    
    Answered on October 16, 2018.
    Add Comment

    The ng-cloak directive is a built-in angular directive that hides all of the elements on the page that contain the directive:

    <div ng-cloak>
    <h1>Hello {{ foo }}</h1>
    </div>
    

    The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none .

    <!-- when $scope.myValue is truthy (element is visible) -->
    <div ng-show="1"></div>
    <!-- when $scope.myValue is falsy (element is hidden) -->
    <div ng-show="0" class="ng-hide"></div>
    
    
    Answered on December 16, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.