详解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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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
Zend引擎的发展 [15]
2006/10/09 PHP
PHP详细彻底学习Smarty
2008/03/27 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
一些mootools的学习资源
2010/02/07 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Django values()和value_list()的使用
2020/03/31 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS