AngularJS中的内置指令-创新互联

AngularJS可以把模版编写成HTML的形式,利用指令来拓展HTML标签,增加声明式语法来实现想做的任何事情。AngularJS的内置指令包括渲染指令、事件指令和节点指令。

创新互联主要从事成都网站建设、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务青浦,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

渲染指令

ng-bind:

   相当于:

`something`

ng-bind-template:

   如果用ng-bind-template,则相当于:

ng-init:

   初始化一个变量。





    



    
        

`something`

    
              angular.module('app', [])         .controller('Controller1', ['$scope', function(parm) {             parm.something = 'hello world';         }]);     

   在页面显示的是what a hot day。

ng-repeat:

    循环输出。

   其中,$index为当前循环到的下标,boolean值$first表示是否为头元素,boolean值$last表示是否为尾元素,boolean值$middle表示是否为非头非尾元素。





    



    
        
            
  • index:{{$index}}
  •             
  • isFirst?{{$first}}
  •             
  • isMiddle?{{$middle}}
  •             
  • isLast?{{$last}}
  •              
                  angular.module('app', [])         .controller('Controller1', function($scope) {});     

       结果为:

    AngularJS中的内置指令

    ng-include:

       加载另一个HTML页面。

       使用ng-include加载另一页面到当前页面,浏览器会提示错误。使用ng-include指令的时候,会用到AJAX请求XMLHttpRequest。但是我们是直接用浏览器打开的当前网页,并没有通过web容器访问,所以存在跨域访问问题,加载http://www.scut.edu.cn/jw2005/也就失败了。解决办法很简单:将代码部署到tomcat等web容器下,通过http访问即可。或者使用webstorm,会自动地启动web容器。

    事件指令

    ng-click,ng-dbclick,ng-mousedown,ng-mouseup,ng-mouseenter,ng-mouseleave,ng-mousemove,ng-over,ng-submit 这些和JavaScript原生的on-系列指令是类似的。

    ng-change:

    
    
    
    
        
    
    
    
        
            
            
            

    `anything`

                       angular.module('app', [])         .controller('Controller1', function() {});     

    AngularJS中的内置指令

    节点指令

    ng-style:

       和HTML的style是一样的。

    ng-class:

        ng-class="{className:expression}" 如果expression为true,则使用className这个class。

    ng-class-odd:

       多用于表格,单数行的样式。

    ng-class-even:

       多用于表格,偶数行的样式。

    ng-show:

        ng-show="expression"如果expression为true,则显示。

    ng-hide:

        ng-hide="expression"如果expression为true,则隐藏。

    ng-switch:

    
        good
        bad
    

       如果expression为true,显示good,否则会显示bad。

    ng-src:

    
    
    
    
        
    
    
    
        
            
        
        
    
    
    

    ng-href:

       类似ng-src。

    ng-if:

        类似ng-show。

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    网站标题:AngularJS中的内置指令-创新互联
    URL标题:http://bzwzjz.com/article/cocdde.html

    其他资讯

    Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
    友情链接: 定制网站设计 网站建设方案 成都网站建设 定制网站设计 成都网站设计 定制网站制作 成都营销网站制作 重庆网站制作 营销型网站建设 手机网站制作 成都网站制作 成都企业网站建设公司 成都网站设计 网站建设推广 成都网站建设 成都网站设计 LED网站设计方案 成都网站建设 成都网站设计 成都网站建设公司 温江网站设计 重庆手机网站建设