After writing some code to remove '#' tags from text input, I encountered an issue upon loading the page. The initial display showed '{{textWithHashes | textWithoutDashes}}', which is not appealing at all. I attempted to use ng-cloak to hide it, but unfortunately, it did not work as expected. Can anyone provide insight into why this is happening and suggest better ways to conceal it?
Here is the HTML file:
<!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>
And here is the Javascript file:
var appModule=angular.module('appModule',[]);
appModule.filter('textWithoutDashes',function(){
return function(text){
return text.split('#').join(' ');
}
});
appModule.controller('appModuleCtrl',function(){
});