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嵌套函数及闭包
Nov 09 Javascript
EasyUI 中 MenuButton 的使用方法
Jul 14 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
详解vue中组件参数
Jul 09 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Python编写登陆接口的方法
2017/07/10 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书