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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
详解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&&mysql)四
2006/10/09 PHP
写出高质量的PHP程序
2012/02/04 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
React快速入门教程
2017/01/17 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
js实现左右轮播图
2020/01/09 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python中类的属性和方法介绍
2018/11/27 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
谈谈python垃圾回收机制
2020/09/27 Python
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
投标担保书范文
2014/04/02 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL