Angular学习（十六）——用指令修改DOM/校验用户输入

最新推荐文章于 2022-01-19 23:23:03 发布

SnowUnicorn

最新推荐文章于 2022-01-19 23:23:03 发布

阅读量975

点赞数

分类专栏： AngulaJS 文章标签： html5 指令 directive dom 校验

本文链接：https://blog.csdn.net/shixihaoma/article/details/38546069

版权

AngulaJS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

用指令修改DOM

标识符扩展了HTML语法，它是一种用自定义元素和属性关联行为和DOM变化的方法。通过他们，我们可以创建可重用的UI组件，配置我们的应用，以及在UI模板中做几乎任何你想做的事情。

可以使用Angular内嵌的标识符来编写应用，但是你需要编写自己的标识符。但你用一种内嵌的标识符还未支持的方式处理浏览器事件或者修改DOM时，你就会意识到需要打破常规。这部分代码应该属于你写的标识符部分，而不是控制器、服务或应用的其他地方。

正如服务一样，你通过模块API调用它的directive()函数来定义标识符，在这个函数中directiveFunction是一个定义标识符特性的工厂函数：

var appModule = angular.module(''appModule),[...];
appModule.directive('directiveName',directiveFunction);

编写标识符工厂函数是一个很深的灵域，下面我们来做一个简单的示例。在HTML5中有一个新属性叫做autofocus，它能够把键盘的焦点聚焦在input元素上。当你让用户第一次和元素交互时通过键盘而不是点击它时，你应该使用它。但是当我们洗完刚在某个非input元素上运行，比如一个连接或者某个div时，再或者运行在非HTML5环境下时，我们可以用一个标识符来实现该聚焦功能。Angular中该功能的代码主要为：

var appModule = angular.module('app',[]);
appModule.directive('ngbkFocus',function(){
     return {
       link:function(scope,element,attr,controller){
           element[0].focus();
        } 
    };
});

在这里返回一个带指定连接函数的标识符对象，这个链接函数有封闭域的引用，它所依赖的DOM元素，属性的数组传递给了标识符，以及DOM元素上的控制器（如果在该元素上存在控制器的话）。这里只需要获取这个元素，燃火调用它的focus()方法即可。下面我们用一个完整的示例来进行说明，代码如下：

<html ng-app='app' >
<body ng-controller="SomeController">
   <button ng-click="clickUnfocused()">
     Not focused
   </button>
   
   <button ngbk-focus ng-click="clickFocused()">
     I'm very focused
   </button>
   <div>{{ message.text}}</div>
</body>
<script src="angular.min.js"></script>
<script>
	var appModule = angular.module('app',[]);
	
	appModule.directive('ngbkFocus',function(){
		return {
			link: function(scope, element, attr, controller){
				element[0].focus();
			}
		};
	});
	function SomeController($scope){
	    $scope.message = { text: 'nothing clicked yet'};
		$scope.clickUnfocused = function(){
			$scope.message.text = 'unfocused button clicked';
		};
		
		$scope.clickFocused = function()
		{
			$scope.message.text = 'focus button clicked';
		}
	}
	</script>
</html>

校验用户输入：

Angular自动用几个适合于单页面应用的特性改善了<form>元素。特性之一就是，只有当整套元素合法时，Angular才让你为表单中的输入框申明合法状态以及允许提交表单。例如，我们创建一个注册表单，表单中需要输入一个名称和Email，但是有个可选的年龄字段，在用户提交到服务端之前我们能校验多个用户属性，下面来举个简单的示例来进行说明。

首先我们希望确保用户已经在name字段中输入文字，以及输入了一个合法的Email，如果输入年龄，那么应该是合法的。我们可以在模板中做这些，使用Angular扩展的<form>以及多个input元素，就像这样：

<h1>Sign Up</h1>
<form name='addUserForm' >
	<div>First name:<input ng-model='user.first' required></div>
	<div>Last name:<input ng-model='user.last' required></div>
	<div>Email:<input type = 'email' ng-model='user.email' required></div>
	<div>Age:<input type='number' ng-model='user.age' ng-maxlength='3' ng-min='1'></div>
	<div><button>Submit</button></div>
</ng-form>

注意，我们已经使用了来自HTML5的required属性，Email类型、number类型输入框，在一些字段上做我们的校验。这个能在Angular中很好的运行，老版本的非HTML5浏览器，Angular会用相同功能的标识符来填充这些。

然后，给表单添加控制器，处理由表单变化的提交请求，来引用这个控制器。

在控制器内部，可以通过$valid属性来访问表单的校验状态。当表单中所有的请求都是合法时，Angular会把它设置成TRUE。我们可以使用$valid属性来做额外的事情。比如当表单还未完成时禁止提交按钮。通过个体提交按钮添加ng-disabled，能够阻止非法状态的提交。

<button ng-click='addUser()' ng-disabled='!addUserForm.$valid'>Submit</button>

最终将所有的代码进行整理，得出该示例的源代码为：

<html ng-app='app' >
<body>
<h1>Sign Up</h1>
<form name='addUserForm' ng-controller="AddUserController">
	<div ng-show="message">{{message}}</div>
	<div>First name:<input name='firstName' ng-model='user.first' required></div>
	<div>Last name:<input ng-model='user.last' required></div>
	<div>Email:<input type = 'email' ng-model='user.email' required></div>
	<div>Age:<input type='number' ng-model='user.age' ng-maxlength='3' ng-min='1'></div>
	<div><button ng-click='addUser()' ng-disabled='!addUserForm.$valid'>Submit</button></div>
</ng-form>   
</body>
<script src="angular.min.js"></script>
<script>
	var appModule = angular.module('app',[]);
	
	
	function AddUserController($scope){
	    $scope.message = "";
		$scope.addUser = function(){
			$scope.message  = 'Thanks, '+ $scope.user.first + ", we added you!";
		};
	}
	</script>
</html>