AngularJS如何開啟頁面隱藏顯示運算式的教程

本文執行個體講述了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://www.111cn.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 %>