CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
SivaRajini
SivaRajini

Reputation: 7375

Angular JS ng-cloak is not working properly expression symbol showing when page loaded

I am new to angular js and I am trying to fix the issue that some of the html code displays before it gets evaluated. It is first showing the expression and then the value. I have added ng-cloak in the body, but it is not working. I, then, tried to add it to the html top section, but no luck. Checked the below link:

ng-cloak not working when page load

but I am not able to find the correct solution for this.

HTML:

<body ng-app="rootApp" ng-cloak>
<div class="pName" ng-init="getDetails()">
                        <strong> {{desc}} <br>
                        {{shortdesc}} {{name}}</strong>
                    </div>
</body>

controller code:

$scope.getDetails = function () {
 // this is the  service call
        service.getName({ id: 3 }).$promise.then(function (data) {
            if (data.length > 0) {
                $scope.desc = data[0].desc;
                $scope.shortdesc = data[0].shortdesc;
                $scope.name = data[0].name;
            }

        });

    }

Upvotes: 0

Views: 555

Answers (2)

Kumar
Kumar

Reputation: 280

Include this CSS

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

Even you need to wite ng-cloak inside <strong>

<strong ng-cloak>

Upvotes: 1

Viijay ijardar
Viijay ijardar

Reputation: 1125

when we use ng-cloak we put ng-Cloak in css please follow url https://docs.angularjs.org/api/ng/directive/ngCloak

Upvotes: 2

Related Questions