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

 更新时间:2016年12月25日 11:21:53   作者:小小平凡世界  
这篇文章主要介绍了AngularJS打开页面隐藏显示表达式用法,结合实例形式分析了AngularJS中打开页面隐藏显示表达式相关命令使用技巧,需要的朋友可以参考下

本文实例讲述了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://www.jb51.net/"},
      {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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • AngularJS 霸道的过滤器小结

    AngularJS 霸道的过滤器小结

    本篇文章主要介绍了AngularJS 霸道的过滤器小结,在实际操作中,我们需要对统一数据源进行多次转换,本文详细讨论有关过滤器的用法 。
    2017-04-04
  • AngularJS入门教程之Scope(作用域)

    AngularJS入门教程之Scope(作用域)

    本文主要介绍AngularJS Scope(作用域),这里对Score知识做了详细介绍,并提供实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • Angular应用Bootstrap过程步骤逻辑详解

    Angular应用Bootstrap过程步骤逻辑详解

    这篇文章主要为大家介绍了Angular应用Bootstrap过程步骤逻辑详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 简介AngularJS中使用factory和service的方法

    简介AngularJS中使用factory和service的方法

    这篇文章主要简单介绍了AngularJS中使用factory和service的方法,主要针对自定义工厂和服务的创建来讲,需要的朋友可以参考下
    2015-06-06
  • AngularJS入门教程之路由机制ngRoute实例分析

    AngularJS入门教程之路由机制ngRoute实例分析

    这篇文章主要介绍了AngularJS入门教程之路由机制ngRoute,结合实例形式分析了AngularJS路由机制的原理、ngRoute的组成、配置、参数与相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • Angularjs使用指令做表单校验的方法

    Angularjs使用指令做表单校验的方法

    本篇文章主要介绍了Angularjs使用指令做表单校验的方法,详细的介绍了用指令做校验的方法,具有一定的参考价值,有兴趣的可以了解一下。
    2017-03-03
  • Angular中的$watch、$watchGroup、$watchCollection

    Angular中的$watch、$watchGroup、$watchCollection

    这篇文章主要介绍了Angular中的$watch、$watchGroup、$watchCollection ,需要的朋友可以参考下
    2017-06-06
  • AngularJS 事件发布机制

    AngularJS 事件发布机制

    这篇文章主要介绍了AngularJS 事件发布机制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Angular2实现自定义双向绑定属性

    Angular2实现自定义双向绑定属性

    本篇文章主要介绍了Angular 2实现自定义 双向绑定 属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Angular PWA使用的Demo示例

    Angular PWA使用的Demo示例

    这篇文章主要介绍了Angular PWA使用的Demo示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论