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 笔记二 Array和Date对象方法
May 22 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
javascript生成随机数的方法
May 16 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
JavaScript实现下拉列表
Jan 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
两个DIV等高的JS的实现代码
2007/12/23 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
js变换显示图片的实例
2013/04/16 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Django自定义manage命令实例代码
2018/02/11 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
解释一下钝化(Swap out)
2016/12/26 面试题
班主任评语大全
2014/04/26 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
主要领导对照检查材料
2014/08/26 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年教研室工作总结
2014/12/06 职场文书
中班教师个人总结
2015/02/05 职场文书
生产现场禁烟通知
2015/04/23 职场文书
幸福来敲门观后感
2015/06/04 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL