AngularJS实现自定义指令及指令配置项的方法


Posted in Javascript onNovember 20, 2017

本文实例讲述了AngularJS实现自定义指令及指令配置项的方法。分享给大家供大家参考,具体如下:

AngularJS自定义指令有两种写法:

//第一种
angular.module('MyApp',[])
.directive('zl1',zl1)
.controller('con1',['$scope',func1]);
function zl1(){
  var directive={
    restrict:'AEC',
   template:'this is the it-first directive',
  };
  return directive;
};
function func1($scope){
  $scope.name="alice";
}
//第二种
angular.module('myApp',[]).directive('zl1',[ function(){
 return {
  restrict:'AE',
  template:'thirective',
  link:function($scope,elm,attr,controller){
   console.log("这是link");
  },
  controller:function($scope,$element,$attrs){
   console.log("这是con");
  }
 };
}]).controller('Con1',['$scope',function($scope){
 $scope.name="aliceqqq";
}]);

指令配置项

angular.module('myApp', []).directive('first', [ function(){
  return {
    // scope: false, // 默认值,共享父级作用域
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    template: 'first name:{{name}}',
  };
}]).directive('second', [ function(){
  return {
    scope: true, // 继承父级作用域并创建指令自己的作用域
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    //当修改这里的name时,second会在自己的作用域中新建一个name变量,与父级作用域中的
    // name相对独立,所以再修改父级中的name对second中的name就不会有影响了
    template: 'second name:{{name}}',
  };
}]).directive('third', [ function(){
  return {
    scope: {}, // 创建指令自己的独立作用域,与父级毫无关系
    // controller: function($scope, $element, $attrs, $transclude) {},
    restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
    template: 'third name:{{name}}',
  };
}])
.controller('DirectiveController', ['$scope', function($scope){
  $scope.name="mike";
}]);

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 #Javascript
详细分析jsonp的原理和实现方式
Nov 20 #Javascript
three.js中文文档学习之通过模块导入
Nov 20 #Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 #Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 #Javascript
three.js中文文档学习之创建场景
Nov 20 #Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php发送与接收流文件的方法
2015/02/11 PHP
php PDO异常处理详解
2016/11/20 PHP
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python操作excel让工作自动化
2019/08/09 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
一份Java笔试题
2012/02/21 面试题
党支部综合考察材料
2014/05/19 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
盗窃案辩护词
2015/05/21 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
如何通过cmd 连接阿里云服务器
2022/04/18 Servers