AngularJS 学习

最新推荐文章于 2020-05-09 19:13:36 发布

我喜欢你喜欢我的歌

最新推荐文章于 2020-05-09 19:13:36 发布

阅读量275

点赞数

分类专栏： AngularJs 文章标签： angularjs

本文链接：https://blog.csdn.net/qq_31520903/article/details/78777999

版权

AngularJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 
 AngularJS 指令 

 
 AngularJS 指令是扩展的 HTML 属性，带有前缀  
 ng- 
 。 

 
 ng-app 
  指令初始化一个 AngularJS 应用程序。 

 
 ng-init 
  指令初始化应用程序数据。 

 
 ng-model 
  指令把元素值（比如输入域的值）绑定到应用程序。 

 
 ng-app 
  指令告诉 AngularJS，<div> 元素是 AngularJS  
 应用程序 
  的"所有者"。 

 
 一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。 

 
 数据绑定 

 
 {{ firstName }} 
  表达式是一个 AngularJS 数据绑定表达式。

 
 AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。 

 
 {{ firstName }} 
  是通过  
 ng-model="firstName" 
  进行同步。 

 
 在下一个实例中，两个文本域是通过两个 ng-model 指令同步的： 

 
 < 
 div 
   
 ng-app 
 = 
 "" 
   
 ng-init 
 = 
 " 
 quantity=1;price=5 
 " 
 > 
   

 
 < 
 h2 
 > 
 价格计算器 
 </ 
 h2 
 > 
   

 
 数量：  
 < 
 input 
   
 type 
 = 
 " 
 number 
 " 
   
 ng-model 
 = 
 " 
 quantity 
 " 
 > 

 
 价格：  
 < 
 input 
   
 type 
 = 
 " 
 number 
 " 
   
 ng-model 
 = 
 " 
 price 
 " 
 > 
   

 
 < 
 p 
 >< 
 b 
 > 
 总价： 
 </ 
 b 
 > 
  {{ quantity * price }} 
 </ 
 p 
 > 
   

 
 </ 
 div 
 > 

 
 ng-repeat 
  指令会重复一个 HTML 元素： 

 
 < 
 div 
   
 ng-app 
 = 
 "" 
   
 ng-init 
 = 
 " 
 names=['Jani','Hege','Kai'] 
 " 
 > 
   

 
 < 
 p 
 > 
 使用 ng-repeat 来循环数组 
 </ 
 p 
 > 
   

 
 < 
 ul 
 > 
   

 
 < 
 li 
   
 ng-repeat 
 = 
 " 
 x in names 
 " 
 > 
  {{ x }} 
 </ 
 li 
 > 
   

 
  
 </ 
 ul 
 > 

 
  
 </ 
 div 
 > 

 
 < 
 div 
   
 ng-app 
 = 
 "" 
   
 ng-init 
 = 
 " 
 names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}] 
 " 
 > 
   

 
 < 
 p 
 > 
 循环对象： 
 </ 
 p 
 > 

 
 < 
 ul 
 >

 
 < 
 li 
   
 ng-repeat 
 = 
 " 
 x in names 
 " 
 > 
  {{ x.name + ', ' + x.country }}  
 </ 
 li 
 > 

 
 </ 
 ul 
 >

 
 </ 
 div 
 > 

 
 AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。 

 
 把实例中的对象想象成数据库中的记录。 

 
 ng-app 指令 

 
 ng-app 
  指令定义了 AngularJS 应用程序的  
 根元素 
 。 

 
 ng-app 
  指令在网页加载完毕时会 
 自动引导 
 （自动初始化）应用程序。 

 
 稍后您将学习到  
 ng-app 
  如何通过一个值（比如 ng-app="myModule"）连接到代码模块。 

 
 ng-init 指令 

 
 ng-init 
  指令为 AngularJS 应用程序定义了  
 初始值 
 。 

 
 通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它 
 。 

 
 稍后您将学习更多有关控制器和模块的知识。 

 
 ng-model 指令 

 
 ng-model 
  指令  
 绑定 HTML 元素 
  到应用程序数据。 

 
 ng-model 
  指令也可以： 

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。

 
 ng-repeat 指令 

 
 ng-repeat 
  指令对于集合中（数组中）的每个项会  
 克隆一次 HTML 元素 
 。 

 
 创建自定义的指令 

 
 除了 AngularJS 内置的指令外，我们还可以创建自定义指令。 

 
 你可以使用 
   
 .directive 
  函数来添加自定义的指令 
 。 

 
 要调用自定义指令，HTML 元素上需要添加自定义指令名 
 。 

 
 使用驼峰法来命名一个指令，  
 runoobDirective 
 , 但在使用它时需要以  
 - 
  分割,  
 runoob-directive 
 : 

 
 <!DOCTYPE html> 

 
 <html> 

 
 <head> 

 
 <meta charset="utf-8"> 

 
 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>  

 
 </head> 

 
 <body ng-app="myApp"> 

 
 <runoob-directive></runoob-directive> 

 
 <script> 

 
 var app = angular.module("myApp", []); 

 
 app.directive("runoobDirective", function() { 

 
 return { 

 
 template : "<h1>自定义指令!</h1>" 

};

});

 
 </script> 

 
 </body> 

 
 </html> 

 
 除此之外还可以通过 

 
  
 元素名  

 
 <runoob-directive></runoob-directive> 

 
 属性  

 
 <div 
   
 runoob-directive 
 ></div> 

 
 类名  

 
 <div 
   
 class= 
 "runoob-directive" 
 ></div> 

 
 注释 

 
 <!-- directive: runoob-directive --> 

 
 限制使用 

 
 你可以限制你的指令只能通过特定的方式来调用。 

 
 通过添加  
 restrict 
  属性,并设置只值为  
 "A" 
 , 来设置指令只能通过属性的方式来调用: 

 
 var 
  app = angular.module( 
 "myApp" 
 , []); 

 
 app.directive( 
 "runoobDirective" 
 ,  
 function 
 () { 

 
 return 
  {

 
         restrict :  
 "A" 
 , 

 
         template :  
 "<h1>自定义指令!</h1>" 

};

});

 
 restrict 
  值可以是以下几种: 

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

 
 angular自定义指令的两种写法： 

 
 ----------------------------------------------------------------------------------------------- 

 
 上面这种，感觉更清晰明确一点。 

 
 angular.module('MyApp',[]) 

 
 .directive('zl1',zl1) 
  
  .controller('con1',['$scope',func1]);

 
 function zl1(){

 
 var directive={

 
 restrict:'AEC',

 
 template:'this is the it-first directive',

};

 
 return directive;

};

 
 function func1($scope){ 

 
 $scope.name="alice";

}

 
 ----------------------------------------------------------------------------------------------- 

 
 //这是教程里类似的写法 

 
 angular 
 . 
 module 
 ( 
 'myApp' 
 ,[]). 
 directive 
 ( 
 'zl1' 
 ,[ 
   
 function 
 (){ 
   
 return 
   
 { 
  restrict 
 : 
 'AE' 
 , 
   
 template 
 : 
 'thirective' 
 , 
  link 
 : 
 function 
 ( 
 $scope 
 , 
 elm 
 , 
 attr 
 , 
 controller 
 ){ 
  console 
 . 
 log 
 ( 
 "这是link" 
 ); 
   
 }, 
  controller 
 : 
 function 
 ( 
 $scope 
 , 
 $element 
 , 
 $attrs 
 ){ 
  console 
 . 
 log 
 ( 
 "这是con" 
 ); 
   
 } 
   
 }; 
  
 }]). 
 controller 
 ( 
 'Con1' 
 ,[ 
 '$scope' 
 , 
 function 
 ( 
 $scope 
 ){ 
  $scope 
 . 
 name 
 = 
 "aliceqqq" 
 ; 
  
 }]); 

我喜欢你喜欢我的歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 学习

AngularJS 指令AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。ng-app 指令初始化一个 AngularJS 应用程序。ng-init 指令初始化应用程序数据。ng-model 指令把元素值（比如输入域的值）绑定到应用程序。ng-app 指令告诉 AngularJS，元素是 AngularJS 应用程序的"所有者"。
复制链接

扫一扫