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实现复制功能各浏览器支持情况实测
Jul 18 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
prototype.js常用函数详解
Jun 18 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
详解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
收集的DedeCMS一些使用经验
2007/03/17 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JavaScript获得url查询参数的方法
2015/07/02 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
在python中安装basemap的教程
2018/09/20 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Django中ORM的基本使用教程
2020/12/22 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
30岁生日感言
2014/01/25 职场文书
环保倡议书
2014/04/14 职场文书
生产实习心得体会范文
2016/01/22 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python