AngularJs 指令

爱被打了一巴掌 2021-07-24 20:18 390阅读 0赞

AngularJs框架
    	指令(可以理解为属性)
    	在标签指令中书写的NG变量不用带$scope.
    
    	1、边界指令ng-app
    		(1)AngularJs框架在使用时,除了需要引入框架,还需要边界指令告知框架在哪个范围内生效
    		(2)习惯写在html标签中,在当前页面中生效
    		(3)<html ng-app>
    
    	2、呈现指令{
       {}}
    		(1){
       {}}用来表示内容呈现功能
    		(2)在{
       {}}中书写NG语法规则下的变量、字符串和表达式
    
    	3、信息指令ng-model
    		(1)NG框架规定ng-model用来对input、textarea这类用于收集用户数据的标签进行数据绑定
    		(2)ng-model所赋的值是用来保存用户输入内容的变量
    		(3)<textarea ng-model='自定义变量名'></textarea>
    
    	4、绑定指令ng-bind
    		(1)NG框架中用于对非输入项的标签的使用的类似于呈现指令的指令
    		(2)能够将NG变量绑定到想要显示的标签上,并且NG框架失败也不会将语法错误暴露出来
    		(3)ng-bind='自定义变量名,NG变量不用加{
       {}}'
    		(4)会对标签内的内容进行覆盖操作,包括内部的标签
    		
    
    	5、初始化指令ng-init
    		(1)NG框架中使用该指令来对边界内部的数据模型(NG变量等)进行初始化赋值
    		(2)并没有规定的必须摆放位置,习惯放在body标签上
    		(3)在页面加载后自动对内部数据模型进行初始化操作
    		(4) <body ng-init='msg="hello angularJs"'></body>
    	
    	6、标签开关指令ng-show/ng-hide
    		(1)ng-show='自定义变量',自定义变量为布尔值
    		(2)当自定义变量为true时,默认标签正常显示,当为false时,标签不显示,即标签所占空间位置也消失
    		(3)ng-hide和ng-show用法一样,true时不显示标签
    		
    	7、配合控制器的遍历指令ng-repeat(用来重复构建html元素)
    		(1)在需要遍历的标签中添加 ng-repeat='自定义变量名 in NG控制器脚本中的变量';表示控制器脚本变量中存储多少个数据就创建多少个标签
    		(2)控制器脚本变量中存储的信息通过ng-bind='自定义变量名'或{
       {自定义变量名}}来取出
    		(3)如果控制器脚本中变量存储相同信息,创建时会报错
    		(4)通过在(1)之后添加 track by $index 解决(3)中的问题
    		(5)通过本指令循环创建的标签,如果控制器脚本中的数组删掉标签对应的数组中的变量
    		则该标签也会删除
    			其中(这些变量都可以在ng-repeat作用域内,直给其他标签/文本直接使用):
    				(1)$index可以提取出来,直接使用{
       {$index}}表示遍历元素的下标
    				(2)$first,$midlle,$last返回布尔值,分别对应第一个元素/中间元素/最后一个元素返回true,其他返回false,配合ng-show='$xx'可实现指定元素显示
    				(3)$odd/$even,当元素下标分别是奇/偶数的时候返回true
    		
    	8、容器指令ng-view
    		(1)给哪个标签添加,该标签就用来路由模式下的作为一个页面加制不同功能的容器
    	
    	9、标签路径指令ng-src、ng-href
    		(1)在NG模式下,作为a标签或img标签的路径属性,使用NG变量赋值
    		
    	10、点击指令ng-click
    		(1)在标签中添加,ng-click='回调函数名()'
    		(2)在controller中补全函数,$scope.函数名=function(){...}
    		(3)在函数中调用函数外的变量,通过this.变量名调用
    		(4)事件指令能触发,标签所在自身包括向上元素中的controller中的函数,向下则不行
    	
    	11、引入类指令ng-class
    		(1)在标签中使用,ng-class='{类1:true,类2:false}'; 为true代表添加
    		
    	12、引入style样式指令ng-style
    		(1)在标签中,ng-style='{属性:'值',属性2:'值2',...}'或者'传入键值对对象'
    	
    	13、鼠标移入移出指令ng-mouseenter/ng-mouseleave
    		(1)用法和ng-click一样,现在标签中定义,ng-mouseenter='函数名()',再在controller中补全

代码示例:

<html ng-app="app" ng-controller="main">
    <head>
    	<meta charset="utf-8">
    	<title ></title>
    	
    	<script src="js/libs/angular.js"></script>
     <style>
    	.a{ 
    		color:red;
    	}
     </style>
    	
    </head>
    <body >
    
    
    <div ng-controller='d1'>
    <h2>价格计算机(自动)</h2>
    数量:<input type="text" ng-model='num'>
    价格: <input type="number" ng-model='price'>		
    总计:{ { num*price}}
    
    </div>
    
    <div ng-controller='d2'>
    数量:<input type="text" ng-model='num'>
    价格: <input type="number" ng-model='price'>	
    <button ng-click='get()'>计算</button>	
    总计:{ { ans}}
    
    </div>
    
    <div ng-controller='d3'>
    <div>
    	<h2>人员信息列表</h2>
    	<ul ng-repeat="peo in arr ">
    		<li ng-show='$even'>{ { peo}}+{ { $index}}+{ { $first}}+{ { $last}}+{ { $middle}}</li>
    		<li ng-class='$even ?{a:true}:{b:true}'>{ { peo}}+{ { $index}}+{ { $first}}+{ { $last}}+{ { $middle}}</li>
    		<li ng-class='{a:$odd,b:$even}'>{ { peo}}+{ { $index}}+{ { $first}}+{ { $last}}+{ { $middle}}</li>
    	</ul>
    
    	<p ng-bind='msg'></p>
    	<p ng-show="5>3" ng-class='{a:true}'>hh</p>
    </div>
    
    </div>
    
    
    <script>
    console.log(angular);
    	var app=new angular.module('app',[]);
    
    	app.controller('main',['$scope',function($scope){ 
    
    		$scope.msg='哈哈';
    	}])
    
    	app.controller('d1',['$scope',function($scope){ 
    		$scope.name='kobe'
    		$scope.num=0;
    
    	}])
    
    	app.controller('d2',['$scope',function($scope){ 
    		$scope.name='jack'
    		$scope.price=0;
    		$scope.num=0;
    		$scope.get=function()
    		{ 
    			$scope.ans=this.num*this.price
    			return $scope.ans
    		}
    	}])
    
    	app.controller('d3',['$scope',function($scope){ 
    		$scope.arr=['jeff','mike','jack'];
    	}])
    
    
    
    </script>
    
    </body>
    </html>