【AngularJS】——核心特性之指令
|
在前两篇文章中介绍了AngularJS三大特性：MVC框架、模块化和依赖注入以及路由机制，今天小编介绍一下AngularJS的另一大特性：指令。
我们都知道，AngularJS通过指令对HTML达到了一个拓展的作用。指令分为两种，一种是 内置指令，为应用添加功能；另一种是自定义指令，用户可自己定义相关内容。
1、内置指令内置指令是指带有前缀ng-的一些指令，它拓展了HTML。现AngularJS内置指令有63个，如图：
现列举几个内置指令的应用： 1）ng-app初始化一个AngularJS应用程序，它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用来加载各种AngularJS模块AngularJS应用。在下面的例子中，我们定义默认AngularJS应用使用div元素的ng-app 属性。
<div ng-app=""> ... </div>
2）ng-modelng-model指令定义在AngularJS应用中使用的模型/变量。在下面的例子中，我们定义了一个名为“myModel”的模型。
<div ng-app=""> ... <p>Enter your Name: <input type="text" ng-model="myModel"></p> </div> 3）ng-repeatng-repeat 指令重复html元素集合中的每个项目。在下面的例子中，我们已经迭代了数组countries。
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ',Locale: ' + country.locale }}
</li>
</ol>
</div>
2、自定义指令自定义指令中使用AngularJS扩展HTML的功能。自定义指令使用的“指令”的功能定义。自定义指令只是替换了它被激活的元素。引导过程中AngularJS应用程序找到了匹配的元素，并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素。 AngularJS提供支持，以下列元素的类型来创建自定义指令。
以一个简单的Demo展示自定义指令的应用：
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>AngularJS Directive Test</h2>
<div ng-app="mainApp" ng-controller="StudentController">
<student name="yxm"></student><br/>
<student name="hcy"></student>
</div>
<!-- 引用Google CDN的ng库 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
/*定义一个名为mainApp的module*/
var mainApp = angular.module("mainApp",[]);
/*定义名为student的指令*/
mainApp.directive('student',function() {
var directive = {};
directive.restrict = 'E'; //元素
directive.template = "Student: <b>{{student.name}}</b>,Roll No: <b>{{student.rollno}}</b>";
directive.scope = {
student : "=name"
}
/*compile函数对模板自身进行转换*/
directive.compile = function(element,attributes) {
element.css("border","1px solid #98FB98");
/* 每条指令运行link函数*/
var linkFunction = function($scope,element,attributes) {
element.html("Student: <b>"+$scope.student.name +"</b>,Roll No: <b>"+$scope.student.rollno+"</b><br/>");
element.css("background-color","#00FF7F");
}
return linkFunction;
}
return directive;
});
/*定义控制器以更新范围为指令。在这里，我们使用name属性值作为子的作用域。*/
mainApp.controller('StudentController',function($scope) {
$scope.yxm = {};
$scope.yxm.name = "yxm test";
$scope.yxm.rollno = 1;
$scope.hcy = {};
$scope.hcy.name = "hcy test";
$scope.hcy.rollno = 2;
});
</script>
</body>
</html>
效果图：
结语：本篇文章只是简单的介绍了一下指令的类型和简单应用，在下篇文章中，再详细描述一下指令的执行机制，叙述一下compile和link函数是如何工作的。希望大家继续关注。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |