Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

On Refresh or On Load Page - AngularJS Code is shown

Tags:

angularjs

I am new in AngularJS.

I am fetching data from the Rest API and displaying it on the page.

My Supposed code is giving below.

$http.get(local_url+'/data').
    then(function(response) {
        $scope.data = response.data.client_data;
    });

Now when suppose I write.

<p>{{ data.name }}</p>

So when i come on page, it is showing above {{ data.name }} code after sometime it is showing any name.

=============================================================

Solution.

I used in body tag like that. <body ng-cloak> It will work.

thanks.

like image 251
John Brad Avatar asked Mar 21 '26 02:03

John Brad


1 Answers

What you could do is define the $scope.data before the $http as an empty string

$scope.data = "";

You also could use the build in ngCloak directive. This will prevent AngularJS from displaying the $scope in its raw form.

You can find more info about it inside the AngularJS docs here

Another option would be to use the ng-if or ng-show expression, to check whether a value isset or not before rendering the element.

<p ng-if="data.name">{{data.name}}</p>

or

<p ng-show="data.name">{{data.name}}</p>

Where ng-if clones the element and appends it to the document when the expression is true and ng-show just toggles a display: none; or display: block; state on the element.

Helpfull Links:
ng-if documentation
ng-show documentation

like image 131
Red Avatar answered Mar 24 '26 01:03

Red