CODEWITHSUNDEEP
javascriptangularjs
Prisoner ZERO
Prisoner ZERO

Reputation: 14166

Preventing Angular Template from Initial Display

I am following an online example. However, it doesn't work quite the way I had hoped it would. Now, I could easily do this with jQuery and a class, but I am trying to do it the "Angular Way".

The Angular Template for my tags is initially displaying. Once the scope starts to process, then it hides & the tags come-in as expected when binding.

Q: How do I prevent the Angular Template form initially displaying? enter image description here

UPDATE:
Applying "ng-bind" only changes the nature of the problem. It doesn't solve the problem. enter image description here

MY MARKUP LOOKS LIKE:

<div ng-controller="BlogsIndexController">
    <div class="tags-cloud tags-cloud-category" ng-show="isShown">
        <div class="tag" ng-repeat="category in categories">
            <a href="#" data-iso-sort="iso-sort-category-{{category.SortKey}}">{{category.Name}}</a>
        </div>
    </div>
</div>

MY CONTROLLER LOOKS LIKE:

// CONTROLLER
application.controller('BlogsIndexController', function ($scope, $http, categoryTagsDataService) {
    var vm = this;

    // Internal
    vm.on = {
        databind: {
            categories: function () {
                var categories = categoryTagsDataService.list()
                categories.success(function (data) {
                    $scope.categories = data;
                    $scope.isShown = true;
                });
            }
        }
    };
    vm.databind = function () {
        vm.on.databind.categories();
    };

    // Scope
    $scope.isShown = false;
    $scope.categories = [];

    // Initialize
    vm.databind();
});

Upvotes: 4

Views: 84

Answers (1)

xZ6a33YaYEfmv
xZ6a33YaYEfmv

Reputation: 1816

You should use ngBind="category.Name" instead of {{category.Name}}:

<a href="#" data-iso-sort="iso-sort-category-{{category.SortKey}}"
   ng-bind="category.Name"></a>

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

More info here.

Update 1:

I've never used ngCloak, but docs say that it may help you:

<a href="#" data-iso-sort="iso-sort-category-{{category.SortKey}}"
   ng-bind="category.Name" ng-cloak></a>

Update 2:

I've checked this answer and it seems that you need also to add the next CSS rule:

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

Upvotes: 3

Related Questions