AngularJS打开页面隐藏显示表达式用法示例


Posted in Javascript onDecember 25, 2016

本文实例讲述了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:"https://3water.com/"},
      {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程序设计有所帮助。

Javascript 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
js网页右下角提示框实例
Oct 14 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 #Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 #Javascript
JavaScript中数据类型转换总结
Dec 25 #Javascript
javascript实现用户点击数量统计
Dec 25 #Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 #Javascript
js实现图片切换(动画版)
Dec 25 #Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 #Javascript
You might like
德生BCL3000的电路分析和打磨
2021/03/02 无线电
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python使用三种方法实现PCA算法
2017/12/12 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python @property原理解析和用法实例
2020/02/11 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
解决margin 外边距合并问题
2019/07/03 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
软件测试题目
2013/02/27 面试题
销售员自我评价怎么写
2013/09/19 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
美术指导求职信
2014/03/17 职场文书
办公室主任岗位承诺书
2014/05/29 职场文书
学校督导评估方案
2014/06/10 职场文书
财务管理制度范本
2015/08/04 职场文书
毕业班工作总结
2015/08/10 职场文书
学校运动会开幕词
2016/03/03 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python