详解angular 中的自定义指令之详解API

更新时间：2017年06月20日 15:02:33 作者：小梦想丶

本篇文章主要介绍了angular 中的自定义指令之详解API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

自定义属性的四种类别

分为：元素E，属性A，注释M，类C , 分别如下：

 <my-dir></my-dir>
 <span my-dir="exp"></span>
 <!-- directive: my-dir exp -->
 <span class="my-dir: exp;"></span>

简单创建一个指令

html结构：

<div ng-controller="myCtrl">
 <div my-customer></div>
</div>

JavaScript结构：

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
   };
  }])
  .directive('myCustomer', function() {
   return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
   };
  });

输出：

Name: Naomi Address: 1600 Amphitheatre

说明：此处，myCtrl 中定义的 $scope.customer 属性和属性值都在指令中的模板使用了。同样的，在指令return 对象中的 template 也可被替换成一路径，在路径html中书写和template中同样的代码，使用这种方式，可以操作更多代码。

templateUrl 函数式编程

html结构：

<div ng-controller="myCtrl">
  <div my-customer></div>
</div>

javascript结构：

 angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
  $scope.customer = {
   name: 'Naomi',
   address: '1600 Amphitheatre'
  };
   }])
 .directive('myCustomer', function() {
  return {
   templateUrl: function(elem, attr) {
    return 'customer-' + attr.type + '.html';
   }
  };
 });

不同的templateUrl ①

 Name: {{customer.name}}

不同的templateUrl ②

 Address: {{customer.address}}

输出结果：

Name: Naomi
Address: 1600 Amphitheatre

说明： templateUrl 的值可以是一个函数返回值，返回用于指令中的html模板的url。

隔离指令的作用域

① 通过不同的controller

html结构：

<div ng-app="myApp">
  <div ng-controller="myCtrl1">
    <my-customer></my-customer>
  </div>
  <div ng-controller="myCtrl2">
    <my-customer></my-customer>
  </div>
</div>

javascript结构：

angular.module('myApp', [])
  .controller('myCtrl1', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
   };
  }])
  .controller('myCtrl2', ['$scope', function($scope) {
   $scope.customer = {
    name: 'Igor',
    address: '123 Somewhere'
   };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    templateUrl: 'my-customer.html'
   };
  });

templateUrl html 结构：

 Name: {{customer.name}} Address: {{customer.address}}

输出结果：

Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere

说明：可见不同的controller 有不同的作用范围。虽然指令一样，每次渲染都是分离的，所以我们可以抽象出来指令，用于html模板和代码的重用,封装。但是这样又不是很好，因为用了两个controller，我们可以使用指令中的scope而不是controller里的scope来替代，具体做法是将外部的scope 映射到指令内部的scope, 如下：

② 通过指令属性映射scope

html结构：

<div ng-app="myApp" ng-controller="myCtrl">
 <my-customer info="naomi"></my-customer>
 <my-customer info="igor"></my-customer>
</div>

javascript 结构：

 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
   $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    scope: {
     customerInfo: '=info'
    },
    templateUrl: 'my-customer-iso.html'
   };
  });

templateUrl html结构：

Name: {{customerInfo.name}} Address: {{customerInfo.address}}

编译后的html结果：

Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere

③ 指令中的如果定义scope属性则html中的scope不会直接继承controller中的scope，在html中使用的都需要在scope:{}中声明，否则就是undefined

html 结构：

 <div ng-app="myApp" ng-controller="myCtrl">
   <my-customer info="naomi"></my-customer>
 </div>

javascript结构：

 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
   $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
   $scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
  }])
  .directive('myCustomer', function() {
   return {
    restrict: 'E',
    scope: {
     customerInfo: '=info'
    },
    templateUrl: 'my-customer-plus-vojta.html'
   };
  });

templateUrl html结构：

Name: {{customerInfo.name}} Address: {{customerInfo.address}}
<br>
Name: {{vojta.name}} Address: {{vojta.address}}

html编译后的结果：

Name: Naomi Address: 1600 Amphitheatre
Name: Address:

说明： vojta 在指令中的scope没有被定义，不会直接继承在controller中的，那么他就是undefined，所以就是空白(什么都不显示)

可操作DOM的指令

创建一个用于操作dom的指令，如果需要dom操作也都应该放在指令里。

html 结构：

 <div ng-app="myApp" ng-controller="myCtrl">
  Date format: <input ng-model="format"> <hr/>
  Current time is: <span my-current-time="format"></span>
 </div>

javascript结构：

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.format = 'M/d/yy h:mm:ss a';
  }])
  .directive('myCurrentTime', function($interval, dateFilter) {
    return {
     restrict: 'AE',
     link: function(scope, element, attr){
       var format, timeoutId;

      /* 更新时间函数 */
      function updateTime() {
       element.text(dateFilter(new Date(), format));
      }

      /* 监视时间格式的改变 */
      var attrWatch = scope.$watch(attrs.myCurrentTime, function(value) {
       format = value;
       updateTime();
      });

      /* 定时器 */
      timeoutId = $interval(function() {
       updateTime(); // update DOM
      }, 1000);

      /* 页面跳转后移除定时器防止内存泄露 */
      element.on('$destroy', function() {
       $interval.cancel(timeoutId);
       attrWatch(); // 移除watch
      });
    }
   };
  });

说明：在link函数中，操作dom节点，让dom的文本节点动态显示时间跳动。在页面跳转之后及时清除定时器和监视器以免发生内存泄漏。

通过transclude和ng-transclude创建可包裹其他元素的指令

html结构：

 <div ng-app="myApp" ng-controller="myCtrl">
   <my-dialog>Check out the contents, {{name}}!</my-dialog>
 </div>

javascript结构：

 angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.name = 'Tobias';
  }])
  .directive('myDialog', function() {
   return {
    restrict: 'E',
    transclude: true,
    scope: {},
    templateUrl: 'my-dialog.html',
    link: function(scope) {
      scope.name = 'Jeff';
    }
 };
});

templateUrl html 结构：

 <div class="alert" ng-transclude></div>

编译后的html结构：

Check out the contents, Tobias!

说明：指令中的scope本应隔离controller中的作用域的，但是由于设置了transclude=true选项，scope就会继承controller中的定义，所以最终是Tobias而不是Jeff。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

angular简介和其特点介绍
这篇文章主要介绍了angular简介和其特点介绍,本文讲解了关于和jquery的比较、关于适用场合、关于UI的结合、关于angularjs的特点等内容,需要的朋友可以参考下
2015-01-01
详解Angular组件之投影
在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。
2021-05-05
angularJs使用$watch和$filter过滤器制作搜索筛选实例
本篇文章主要介绍了angularJs使用$watch和$filter过滤器制作搜索筛选实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
AngularJS基础 ng-submit 指令简单示例
本文主要介绍AngularJS ng-submit 指令,这里对ng-submit 指令的基础资料做了详细介绍整理，并附有代码示例，有需要的小伙伴可以参考下
2016-08-08
Angular7中创建组件/自定义指令/管道的方法实例详解
这篇文章主要介绍了在angular7中创建组件/自定义指令/管道的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-04-04
利用Angularjs和原生JS分别实现动态效果的输入框
现在的很多网站都将输入框做成了动态的效果，这样对于用户体检来说非常好，这篇文章分别用Angularjs和原生JS两种方法来实现动态效果的输入框，具有一定的参考价值，有需要的小伙伴们可以来参考借鉴。
2016-09-09
angular5 httpclient的示例实战
本篇文章主要介绍了angular5 httpclient的示例实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
前后端如何实现登录token拦截校验详解
这篇文章主要给大家介绍了关于前后端如何实现登录token拦截校验的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-09-09
AngularJS入门教程之双向绑定详解
本文主要介绍AngularJS 双向绑定，这里整理了详细的知识资料并讲解，而且附有代码示例，有兴趣的小伙伴可以参考下
2016-08-08
AngularJs导出数据到Excel的示例代码
本篇文章主要介绍了AngularJs导出Excel的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08

详解angular 中的自定义指令之详解API

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具