zoukankan      html  css  js  c++  java
  • bootstrap 与 ngCloak

    一、 bootstrap

    1.自动初始化

    Angular会在DOMContentLoaded事件中自动初始化,Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到,Angular会做以下事情:

    加载与module相关的directive。

    创建应用相关的injector(依赖管理器)。

    以ng-app指定根节点,开始对DOM进行相关“编译”工作。换言之,可以将页面的其中一部分(非<html>)作为根节点,从而限制angular的作用范围

    2.手动初始化

    页面没有ng-app指令  使用angular.bootstrap()(

     angular.bootstrap(angular.element(document.getElementById(ID));

    )方法 

    如果页面有多个ng-app指令,只有第一个会起作用,其余的要手动bootstrap

    二、ngCloak

    在使用表达式{{}}时有时会出现闪烁的问题

    1.使用ng-bind指令

    2.使用ng-cloak指令

    angular会在DOM加载完后去解析html view Template,在一些快速浏览器中会在angular解析之前dom就已经显示了所以就会出现闪烁的问题

    使用ngCloak指令解决

    <div class="ng-cloak" ng-cloak>{{angular}}</div>
    

    angular在初始化的时候会在DOM的header中添加css代码。angular将带有ng-clock的的元素设置为display:none,隐藏掉,在等到angular解析到带有ng-clock的节点时候,会把attribute和class同时remove掉,元素显示,这样就可以实现防止节点的闪烁。

    <style type="text/css">@charset "UTF-8";[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}
    </style>

    使用ngCloak时有时还是会有闪烁问题:原因是浏览器的速度比angular在head中加入css的速度还快,在angular添加css代码之前dom就已经显示了。解决办法就是自己在header中添加自己的css代码

    .ng-cloak{
        display:none;
    }
  • 相关阅读:
    linux下使用脚本自动登录远程服务器 Python language ITeye论坛
    Orbix Programmer's Guide Java Edition
    Automating Capistrano Password Prompts with Expect
    pythondaemon 1.5.5
    linux 技巧:使用 screen 管理你的远程会话
    python daemon
    Jsvc
    Running Java applications as daemon on Debian Linux
    How to run a Java Program as a daemon (service) on Linux (openSUSE) using a shell script
    对话 UNIX: 使用 Screen 创建并管理多个 shell
  • 原文地址:https://www.cnblogs.com/xinup/p/4998849.html
Copyright © 2011-2022 走看看