本文实例讲述了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); }); varapp = angular.module("myApp",[],function(){console.log('strat')}); varclumnData = { title:"关于我", detail:"小前端一枚，喜欢javascript、喜欢nodejs、喜欢canvas", email:{title:"邮箱",link:"768065158@qq.com"}, list:[{title:"github",link:"https://github.com/pingfanren/"}, {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 %> |