Question

我编写了一段代码，该代码需要输入一些文字，并删除了＃＆＃39;＃＆＃39;文本中的标签。代码运行正常。但最初当页面加载时我得到了{{textWithHashes | textWithoutDashes}}＆＃39;。这不是很吸引人。我尝试过使用ng-cloak但我仍然无法隐藏它。有人可以告诉我为什么它不起作用，以及是否有更好的方法来隐藏它。

Html文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Removing the delimiters from the Text</title>
        <script src="js/angular.min.js"></script>
        <script src="js/appModule1.js"></script>
    </head>

    <body ng-app="appModule" ng-controller="appModuleCtrl">

        <input type="text" ng-model="textWithHashes">

        <!--The next line will give the text without the hash tags-->

        <label ng-cloak>{{textWithHashes | textWithoutDashes}}</label>

    </body>
</html>

Javascript文件：

var appModule=angular.module('appModule',[]);

appModule.filter('textWithoutDashes',function(){
    return function(text){
        return text.split('#').join(' ');
    }
});


appModule.controller('appModuleCtrl',function(){

});

Answer 1

您可以使用ng-bind并过滤控制器中的文本（这也是推荐的性能wize）：

<label ng-bind="textWithHashes"></label>

在你的控制器中：

appModule.controller('appModuleCtrl',function($scope, $filter){
    $filter('textWithoutDashes')($scope.textWithHashes);
});

Answer 2

根据ng-cloak文档（https://docs.angularjs.org/api/ng/directive/ngCloak），您必须在头标记中添加此css：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

ng-cloak无效

2 个答案: