本文实例讲述了angularjs打开页面隐藏显示表达式用法。分享给大家供大家参考，具体如下：
1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }
2.使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bind后必须要一个dom节点绑定, 例如span上, 没有直接{{}} 用不需要dom节点方便
3.使用ng-model
我要评论
<% include common/header.html %>
<style>[ng-cloak] {display: none !important;}</style>
<!-- s main -->
<div class="main g_cf" ng-app="myapp">
<div class="contain_lf">
<h2 class="about_tit">about</h2>
<div class="ab_content" ng-controller="aboutus" ng-show="true">
<div class="hr" ng-bind="clumndata.title" ng-cloak></div>
<p ng-bind="clumndata.detail" ></p>
<p ng-cloak>{{clumndata.email.title}}：<a href="mailto:{{clumndata.email.link}}" target="_blank" ng-bind="clumndata.email.link" ng-cloak>768065158@qq.com</a></p>
<p ng-repeat = "item in clumndata.list" ng-cloak >{{item.title}}：<a href="{{item.link}}" target="_blank" ng-bind="item.link" ng-cloak></a></p>
</div>
<div class="ab_content" ng-controller="comment">
<div class="hr" ng-bind="title" ng-cloak></div>
<div class="comment_user">
<input type="text" name="username" placeholder="您的大名">
</div>
<div class="comment_con">
<textarea id="editarea" maxlength="300" placeholder="请输入评论，少于300字符"></textarea>
<div class="comment_btn">
<span>ctrl + enter 发送评论，字数：0/300</span><input type="submit" class="commit_btn" value="确认" ng-click = "comment()">
</div>
</div>
</div>
<input type="text" ng-model="name">{{name}}
</div>
<div class="contain_rg">
<div class="rg_tp_clum1">
<h2>欢迎来到pfan空间</h2>
<p>这里有更多的知识分享，交流。</p>
<p><%= content %></p>
<p><%= date %></p>
</div>
</div>
</div>
<div id="next">111111</div>
<!-- e main -->
<% include common/jsfoot.html %>
<script>
angular.element(document.getelementbyid("next")).bind('click', function() {
alert(this.innerhtml);
});
var app = angular.module("myapp",[],function(){console.log('strat')});
var clumndata = {
title:"关于我",
detail:"小前端一枚，喜欢javascript、喜欢nodejs、喜欢canvas",
email:{title:"邮箱",link:"768065158@qq.com"},
list:[{title:"github",link:"https://github.com/pingfanren/"},
{title:"移动技术网",link:"//www.jb51.net/"},
{title:"技术分享平台",link:"http://pingfan1990.sinaapp.com/"},
{title:"前端导航平台",link:"http://doc.pfan123.com/"},
]
};
app.controller("aboutus",function($scope){
$scope.clumndata = clumndata;
});
app.controller("comment",function($scope){
$scope.title = "给我留言";
$scope.comment=function(){
}
});
</script>
<% include common/footer.html %>
更多关于angularjs相关内容感兴趣的读者可查看本站专题：《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论