Question

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

我的标签的角度模板最初显示。一旦范围开始处理，它就会隐藏＆amp;标签在绑定时按预期进入。

问：如何阻止最初显示角色模板表单？

更新
应用“ng-bind”只会改变问题的性质。它没有解决问题。

MY MARKUP看起来像：

<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而不是{{expression}}。由于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;
}

从初始显示中防止角度模板

1 个答案: