网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

AngularJS中的内置指令

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

创新互联公司主营通川网站建设的网络公司,主营网站建设方案,app软件开发公司,通川h5成都微信小程序搭建,通川网站营销推广欢迎通川等地区企业咨询

渲染指令

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:

    
    
    
    
        
    
    
    
        
            
        
        
        
        angular.module('app', [])
            .controller('Controller1', function($scope) {
                $scope.src = '/upload/otherpic76/bdlogo.png';
            });
        
    
    
    


    ng-href:

          类似ng-src。

    ng-if:

          类似ng-show。


    新闻标题:AngularJS中的内置指令
    标题路径:http://bjjierui.cn/article/ppcoch.html

    其他资讯