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 相关文章推荐
js 返回时间戳所对应的具体时间
Jul 20 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
js中日期的加减法
May 06 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript数据类型示例分享
2015/01/19 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python多进程共享变量
2016/04/06 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Java程序员综合测试题
2014/04/25 面试题
结婚典礼证婚词
2014/01/11 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
法院个人总结
2015/03/03 职场文书
刮痧观后感
2015/06/05 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android