AngularJS打開(kāi)頁(yè)面隱藏顯示表達(dá)式用法示例
本文實(shí)例講述了AngularJS打開(kāi)頁(yè)面隱藏顯示表達(dá)式用法。分享給大家供大家參考,具體如下:
1.使用 ng-cloak, 同時(shí)要在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, 代替{{}} 這個(gè)不太方便,因?yàn)槭褂胣g-bind后必須要一個(gè)DOM節(jié)點(diǎn)綁定, 例如span上, 沒(méi)有直接{{}} 用不需要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="請(qǐng)輸入評(píng)論,少于300字符"></textarea> <div class="comment_btn"> <span>ctrl + enter 發(fā)送評(píng)論,字?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>歡迎來(lái)到pfan空間</h2> <p>這里有更多的知識(shí)分享,交流。</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://chabaoo.cn/"}, {title:"技術(shù)分享平臺(tái)",link:"http://pingfan1990.sinaapp.com/"}, {title:"前端導(dǎo)航平臺(tái)",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é)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
AngularJs $parse、$eval和$observe、$watch詳解
這篇文章主要介紹了AngularJs $parse、$eval和$observe、$watch的相關(guān)資料,需要的朋友可以參考下2016-09-09angular源碼學(xué)習(xí)第一篇 setupModuleLoader方法
這篇文章主要介紹了angular源碼學(xué)習(xí)第一篇,setupModuleLoader方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10Angularjs單選改為多選的開(kāi)發(fā)過(guò)程及問(wèn)題解析
在項(xiàng)目中遇到這樣的需求想把下拉框的單選改為多選,怎么實(shí)現(xiàn)呢?下面小編通過(guò)本文給大家分享angularjs單選改為多選的開(kāi)發(fā)過(guò)程及問(wèn)題解析,需要的朋友參考下2017-02-02解決angularJS中input標(biāo)簽的ng-change事件無(wú)效問(wèn)題
今天小編就為大家分享一篇解決angularJS中input標(biāo)簽的ng-change事件無(wú)效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09對(duì)angularjs框架下controller間的傳值方法詳解
今天小編就為大家分享一篇對(duì)angularjs框架下controller間的傳值方法詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10angular 用Observable實(shí)現(xiàn)異步調(diào)用的方法
這篇文章主要介紹了angular 用Observable實(shí)現(xiàn)異步調(diào)用的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用
這篇文章主要介紹了詳解AngularJS1.x學(xué)習(xí)directive 中‘& ’‘=’ ‘@’符號(hào)的區(qū)別使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-08-08詳解Angular的數(shù)據(jù)顯示優(yōu)化處理
本文主要對(duì)Angular的數(shù)據(jù)顯示優(yōu)化處理進(jìn)行詳細(xì)介紹,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2016-12-12angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01