达州做网站

咨询热线：

028-86922220

×

01

关于我们

02

服务项目

高端网站建设

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03

小程序开发

小程序开发

04

案例展示

网站建设案例

小程序案例

电商平台案例

系统平台案例

05

建站动态

06

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://dzwzjz.com/article/ppcoch.html

其他资讯

服务热线：028-86922220