【AngularJS】——核心特性之指令

最新推荐文章于 2018-07-02 15:52:25 发布

杨晓敏M

最新推荐文章于 2018-07-02 15:52:25 发布

阅读量1.4k

点赞数

分类专栏： ------【Android】 ▶总结提高 AnglularJS 文章标签： angularJS directive 指令

本文链接：https://blog.csdn.net/u010924897/article/details/50984033

版权

▶总结提高同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

------【Android】

8 篇文章 0 订阅

订阅专栏

AnglularJS

5 篇文章 0 订阅

订阅专栏

在前两篇文章中介绍了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-model

ng-model指令定义在AngularJS应用中使用的模型/变量。在下面的例子中，我们定义了一个名为“myModel”的模型。

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="myModel"></p>
</div>

3）ng-repeat

ng-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>

效果图：