angularjs指令

最新推荐文章于 2020-09-29 18:47:08 发布

风火一回

最新推荐文章于 2020-09-29 18:47:08 发布

阅读量2.2k

点赞数

分类专栏： AngularJs 文章标签： angularjs 指令写指令

本文链接：https://blog.csdn.net/mafan121/article/details/48829149

版权

AngularJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

angularjs为了减少dom对象的操作，故而它通过指令对常见的文本框，文本域，下拉框都做了规定，以方便angularjs的规范。

一、控件指令

1.文本框、密码框、邮件框、数字框

<input
  ng-model=""
  [name=""]
  [required=""]
  [ng-required=""]
  [ng-minlength=""]
  [ng-maxlength=""]
  [ng-pattern=""]
  [ng-change=""]
  [ng-trim=""]>
...
</input>

ng-required值为true/false，表示是否必填。

ng-pattern：值为正则表达式，提供正则表达式的匹配结果作为input框的值

ng-trim：自动去掉文本框中内容前面后后面的空白。默认值为true。

2.单选框

<input type="radio"
       ng-model=""
       value=""
       [name=""]
       [ng-change=""]
       ng-value="">

ng-value可以替代value，value表示的是一个单选按钮被选中后的值，而ng-value的值可以是一个对象，而不是单一的值。

例如：

<input type="radio" name="colorname" value="{{color.name}}" data-ng-model="colordata" >

3.多选框

<input type="checkbox"
       ng-model=""
       [name=""]
       [ng-true-value=""]
       [ng-false-value=""]
       [ng-change=""]>

ng-true-value：多选框被选中后的值，如果不设置该属性，那么默认被选中的值为true。

ng-false-value：多选框取消选择后的值，如果不设置该属性，那么默认值为false。

4.日期框、时间框

<input type="date"
       ng-model=""
       [name=""]
       [min=""]
       [max=""]
       [required=""]
       [ng-required=""]
       [ng-change=""]>

min：输入的日期小于该值时检验不通过，值必须是yyyy-MM-dd

max：输入的日期大于该值时校验不通过，值必须是yyyy-MM-dd

二、写指令

myModule.directive('namespaceDirectiveName', function factory(injectables) {

        var directiveDefinitionObject = {

            restrict: string,//指令的使用方式，包括标签(E)，属性(A)，类(C)，注释(M)

            priority: number,//指令执行的优先级

            template: string,//指令使用的模板，用HTML字符串的形式表示

            templateUrl: string,//从指定的url地址加载模板

            replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上

            transclude: bool,//是否将当前元素的内容转移到模板中

            scope: bool or object,//指定指令的作用域
		/*object:{	
			name: "@",	    // name 值传递 （字符串，单向绑定） 
			amount: "=",        // amount 引用传递（双向绑定） 
			save: "&"           // 保存操作 
		}*/


            //定义与其他指令进行交互的接口函数
            controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},
           
            require: string,//指定需要依赖的其他指令

            link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等

            compile: function compile(tElement, tAttrs, transclude){

                return: {

                    pre: function preLink(scope, iElement, iAttrs, controller){...},

                    post: function postLink(scope, iElement, iAttrs, controller){...}

                }

            }//编程的方式修改DOM模板的副本，可以返回链接函数

        };

        return directiveDefinitionObject;

});

例如：

html

<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="testapp">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="../../js/angular-1.4.0-rc.2/angular.js"></script>
<script src="../../js/test/controller.js"></script>
</head>
<body>
	<div data-ng-controller="testController">
		<span>姓名：</span>
		<input type="text" data-ng-model="name">
		<div>颜色：</div>
		<span data-my-directive="chooseThis"></span>
		<ul style="list-style:none;padding:15px;margin:0">
			<li data-ng-repeat="color in colorList">
				<input type="radio" name="colorname" value="{{color.name}}"
					data-ng-model="colordata" >
				{{color.name|colorEn:colordata:name}}
			</li>
		</ul>
		<button type="button" data-ng-click="changeColor('绿色')">点我啊</button>
	</div>
</body>
</html>

controller.js

angular.module("testapp",[])
	.controller("testController",function($scope){
		$scope.colorList=[
		     {
		    	 id:1,
		    	 name:"红色",
		    	 color:"red"
		     },
		     {
		    	 id:2,
		    	 name:"黑色",
		    	 color:"black"
		     },
		     {
		    	 id:3,
		    	 name:"绿色",
		    	 color:"green"
		     },{
		    	 id:4,
		    	 name:"黄色",
		    	 color:"yellow"
		     }
		  ];
		$scope.changeColor = function(name){
			$scope.name = name;
			$scope.colordata = name;
		}
}).filter('colorEn',function(){
	return function(colorName,radioValue,inputValue){
		if(radioValue==undefined){
			return colorName;
		}
		if(colorName == radioValue){
			return colorName;
		}else{
			return null;
		}
	}
}).directive('myDirective', function factory() {
	return {
		restrict:'A',
		template:"my frist directive",
		repalce:true	
	}
});

效果图：

风火一回

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
angularjs指令

angularjs为了减少dom对象的操作，故而它通过指令对常见的文本框，文本域，下拉框都做了规定，以方便angularjs的规范。一、控件指令1.文本框 ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""] [ng-pat
复制链接

扫一扫