Prevent Angular template from initial display

I am following an online example. However, this does not work as I hoped. Now I could easily do this using jQuery and the class, but I am trying to do this with the "Angular Way".

The Angular Template for my tags is displayed first. As soon as the area begins to be processed, it is hidden and the tags appear as expected when snapping.

Q: How to prevent the display of the Angular template form? enter image description here

UPDATE:
Using "ng-bind" only changes the nature of the problem. This does not solve the problem. enter image description here

MY MARKUP SEE LOVE:

<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 VIEW LOVE:

// 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();
});
+4
source share
1 answer

ngBind="category.Name" {{category.Name}}:

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

ngBind {{expression}}, , Angular . ngBind , .

.

1:

ngCloak, docs , :

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

2:

, 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;
}
+3

Source: https://habr.com/ru/post/1614887/


All Articles