资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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中的内置指令
    URL分享：http://cdkjz.cn/article/ppcoch.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    网站搜索引擎优化成都网站建设注册域名成都印刷厂广汉锦华建材网站制作关键词优化排名资阳网站建设全网整合营销犀浦防纹窗

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图