首页 > 编程 > JavaScript > 正文

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

2019-11-19 18:16:57
字体:
来源:转载
供稿:网友

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表