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 相关文章推荐
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
Angular 应用技巧总结
Sep 14 Javascript
js初始化验证实例详解
Nov 26 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
Node.js log4js日志管理详解
Jul 31 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 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
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
浅谈React Event实现原理
2018/09/20 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
django表单的Widgets使用详解
2019/07/22 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
餐饮营销方案
2014/02/23 职场文书
《火烧云》教学反思
2014/04/12 职场文书
服装发布会策划方案
2014/05/22 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
退学证明范本3篇
2014/10/29 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
暑假打工感想
2015/08/07 职场文书
Jsonp劫持学习
2021/04/01 PHP
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python