zoukankan      html  css  js  c++  java
  • Angular打开页面隐藏显示表达式

      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:"http://www.cnblogs.com/pingfan1990/"},
                {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 %>

      参考资料:

      ng-bind 其实好一点,http://stackoverflow.com/questions/16125872/why-ng-bind-is-better-than-in-angular

      http://weblog.west-wind.com/posts/2014/Jun/02/AngularJs-ngcloak-Problems-on-large-Pages

  • 相关阅读:
    11g SPA (sql Performance Analyze) 进行升级测试
    SPA游标采集之去除重复
    C++ 实现分数的四则运算
    计算两个数的最大公约数和最小公倍数(欧几里得算法)
    计算a月的第b个星期c
    完数问题
    求整数的最大质因子
    C++ 读取文本文件内容到结构体数组中并排序
    月饼问题PAT B1020(贪心算法)
    路径打印(set以及字符串的相关操作)
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/4865374.html
Copyright © 2011-2022 走看看