防止初始显示的角模板

Question

我正在关注一个在线示例。但是，这并不像我希望的那样工作。现在，我可以轻松地用jQuery和一个类来做到这一点，但我正在尝试使用“Angular Way”。

我的标签的角模板最初显示。一旦示波器开始处理，它会隐藏&标签在绑定时按预期进入。

问：如何防止最初显示的Angular Template表单？

UPDATE：
应用 “NG绑定” 只是改变了问题的性质。它不能解决问题。

我的标记的样子：

<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> 

我的控制器的样子：

// 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(); 
}); 

Answer 1

您应该使用ngBind="category.Name"而不是{{category.Name}}：

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

如果在Angular编译之前，浏览器在原始状态下即刻显示模板，则最好使用ngBind而不是{{表达式}}。由于ngBind是一个元素属性，因此它在加载页面时使绑定对用户不可见。

更多信息here。

更新1：

我从来没有用过ngCloak，但docs说，它可以帮助你：

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

更新2：

我检查this回答，似乎你还需要添加下一个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; 
}