AngularJS-Directive详解 - 01

最新推荐文章于 2020-12-20 12:01:58 发布

程序员Sunday

最新推荐文章于 2020-12-20 12:01:58 发布

阅读量7.4k

点赞数

文章标签： angular directive

本文链接：https://blog.csdn.net/u011068996/article/details/54895645

版权

无需原生开发基础，也能完美呈现京东商城。《混合开发京东商城系统，提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术，混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合，从技术原理到开发上线，让你真实感受到一个明星产品开发的全过程。功能实现之外，还有一流用户体验和优秀交互设计等你一探究竟，拓宽开发眼界。

directive顾名思义，是angular中的一个指令。那么什么是指令那？

指令是DOM元素（例如属性，元素名称，注释或CSS类）的标记，它们告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该DOM元素（例如通过事件监听器），甚至可以转换DOM元素及其子元素。AngularJS附带了一组内置的这些指令，如ngBind，ngModel和ngClass。

因为在HTML中不区分大小写，因此我们通过小写形式引用DOM中的伪指令，通常使用DOM元素（例如ng-model）上的使用连字符分隔的属性。

接下来我们看一个简单的 directive事例

index.html

<!DOCTYPE html>
<html lang="en" ng-app="DirectiveTestApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body ng-controller="MainCtrl as ctrl">

  <div my-customer></div>


    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

index.js

(function(angular){

  angular.module('DirectiveTestApp',[])
    .controller('MainCtrl',function($scope){
      $scope.customer = {
        name:'Sunday',
        address:"jinan"
      }

    }).directive('myCustomer',function(){
      return {
        template : '<h1>name : {{customer.name}} , address: {{customer.address}}</h1>'
      }
    });

})(angular);

我们在index.html中自定义了一个 my-customer 的属性，在js代码中我们对这个属性做了一个声明，即，为包含这个属性的元素添加这里写图片描述了 <h1>name : {{customer.name}} , address: {{customer.address}}</h1> 的模板。
我们看一下当前代码在浏览器中的展示形式。
大家可以看到在浏览器中的元素树中，包含 my-customer 的div元素添加上了我们在js代码中声明的模板。
而在js中写html代码是一件特别蛋疼的事情，如果一直使用 template 会有特别多的不方便的地方，所以angular为我们提供了 templateUrl可以直接引入一个html文件，用于替代 template。

templateUrl是返回要加载并用于指令的HTML模板的URL的函数。
AngularJS将调用带有两个参数的templateUrl函数：指令被调用的元素，以及与该元素相关联的attr对象

这句话是什么意思那？大家看下使用 templateUrl之后的代码。

index.html

<!DOCTYPE html>
<html lang="en" ng-app="DirectiveTestApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body ng-controller="MainCtrl as ctrl">

  <div my-customer type="name"></div>
  <div my-customer type="address"></div>


    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

index.js

(function(angular){

  angular.module('DirectiveTestApp',[])
    .controller('MainCtrl',function($scope){
      $scope.customer = {
        name:'Sunday',
        address:"jinan"
      }

    }).directive('myCustomer',function(){
      return {
        templateUrl:function(elem,attr){
          return 'views/' + attr.type + '.html';
        }
      }
    });

})(angular);

name.html

<h2>Name:   {{customer.name}}</h2>

address.html

<h2>Address:   {{customer.address}}</h2>

我们在设置这个drective的时候，为它设置了一个额外的属性，type="" , 在为其设置 templateUrl的时候可以获取到两个参数，element , attr 即：指令被调用的元素，以及与该元素相关联的attr对象，返回模板的路径。

restrict属性：

A：匹配属性名称
E：匹配元素名称
C：匹配类名
M：匹配注释

我们可以使用 “AE”的组合使其同时支持属性名称和元素名称。

简单的看一下代码：
index.html

<!DOCTYPE html>
<html lang="en" ng-app="DirectiveTestApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body ng-controller="MainCtrl as ctrl">

  <my-customer></my-customer>


    <script src="js/angular.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

index.js

(function(angular){

  angular.module('DirectiveTestApp',[])
    .controller('MainCtrl',function($scope){
      $scope.customer = {
        name:'Sunday',
        address:"jinan"
      }

    }).directive('myCustomer',function(){
      return {
        restrict:"E",
        templateUrl:function(elem,attr){
          return 'views/customer.html';
        }
      }
    });

})(angular);

customer.html

<h2>Name:   {{customer.name}}    Address:   {{customer.address}}</h2>

这一章就先说到这里，下一章为大家讲解directive更深层次的用法。

程序员Sunday

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AngularJS-Directive详解 - 01

directive顾名思义，是angular中的一个指令。那么什么是指令那？指令是DOM元素（例如属性，元素名称，注释或CSS类）的标记，它们告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该DOM元素（例如通过事件监听器），甚至可以转换DOM元素及其子元素。AngularJS附带了一组内置的这些指令，如ngBind，ngModel和ngClass。因为在HTML中
复制链接

扫一扫