快捷導(dǎo)航

AngularJS打開頁面隱藏顯示表達(dá)式用法示例

更新時間：2016年12月25日 11:21:53 作者：小小平凡世界

這篇文章主要介紹了AngularJS打開頁面隱藏顯示表達(dá)式用法,結(jié)合實例形式分析了AngularJS中打開頁面隱藏顯示表達(dá)式相關(guān)命令使用技巧,需要的朋友可以參考下

本文實例講述了AngularJS打開頁面隱藏顯示表達(dá)式用法。分享給大家供大家參考，具體如下：

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節(jié)點(diǎn)綁定, 例如span上, 沒有直接{{}} 用不需要DOM節(jié)點(diǎn)方便

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 發(fā)送評論，字?jǐn)?shù)：0/300</span><input type="submit" class="commit_btn" value="確認(rèn)" 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:"關(guān)于我",
    detail:"小前端一枚，喜歡javascript、喜歡nodejs、喜歡canvas",
    email:{title:"郵箱",link:"768065158@qq.com"},
    list:[{title:"github",link:"https://github.com/pingfanren/"},
      {title:"腳本之家",link:"http://www.dbjr.com.cn/"},
      {title:"技術(shù)分享平臺",link:"http://pingfan1990.sinaapp.com/"},
      {title:"前端導(dǎo)航平臺",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 %>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: