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>

  • 相关阅读:
    「CF1039D」You Are Given a Tree
    「NOIP2016」换教室
    「NOIP2014」飞扬的小鸟
    「AMPPZ2014」The Prices
    POj-3104 Drying 二分+贪心
    HDOJ1312<DFS>
    STL入门2
    HDU1425 <sort 快排>
    2304: Lights Out(枚举)
    1018:放苹果(递归)
  • 原文地址:https://www.cnblogs.com/a8497336/p/6748080.html
Copyright © 2011-2022 走看看