zoukankan      html  css  js  c++  java
  • angular的时间指令 以及防止闪烁问题

    1、点击事件

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    </head>
    <body>
    <div ng-app="myapp" ng-controller="myctrl">
    <input ng-click="fun()" type="button" value="点击" />
    <div id="box"></div>
    </div>
    </body>
    <script src="js/angurlar素材/angular/angular.js"></script>
    <script>
    var app =angular.module("myapp",[]);
    app.controller("myctrl",function($scope){
    $scope.fun=function(){
    box.innerHTML="你好"
    }
    })
    </script>
    </html>

    2、防止闪烁问题

    大家都知道在浏览器加载过程中是从上到下加载的,所以说在加载用angular写的页面时候会出现零点几毫秒的闪烁加载,我们可以用以下几种方法来消除闪烁问题

    (1)ng-bind绑定指令

    <div ng-app="myapp" ng-controller="myctrl">

       <span ng-bind="data"></span>

    </div>

    <script>

    var app = angular.module("myapp",[]).controller("myctrl",function($scope){

    $scope.data="你好";

    }

    </script>

    (2)ng-cloak预先加载指令

    <div ng-app="myapp" ng-controller="myctrl">

       <span ng-cloak>{{data}}</span>

    </div>

    <script>

    var app = angular.module("myapp",[]).controller("myctrl",function($scope){

    $scope.data="你好";

    }

    </script>

  • 相关阅读:
    软件开发模型
    Java学习--数组
    10年软件测试经验
    Log4net
    文件下载界面
    VB.NET中文双引号的处理方法
    SOAPUI使用
    .net数字转换成汉字大写
    SQL调用Webservices
    SQL大小写金额转换
  • 原文地址:https://www.cnblogs.com/a8497336/p/6748080.html
Copyright © 2011-2022 走看看