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


Posted in Javascript onJune 20, 2017

自定义属性的四种类别

分为: 元素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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
angular2使用简单介绍
Mar 01 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 #Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 #Javascript
Vue实现路由跳转和嵌套
Jun 20 #Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 #Javascript
JS中的三个循环小结
Jun 20 #Javascript
详解Vue 方法与事件处理器
Jun 20 #Javascript
Vue Ajax跨域请求实例详解
Jun 20 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
php中使用url传递数组的方法
2015/02/11 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
js实现烟花特效
2020/03/02 Javascript
python实现将文本转换成语音的方法
2015/05/28 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python生成lmdb格式的文件实例
2018/11/08 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
python和go语言的区别是什么
2020/07/20 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
顶岗实习接收函
2014/01/09 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
骨干教师个人总结
2015/02/11 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书