AngularJS中指令的四种基本形式实例分析


Posted in Javascript onNovember 22, 2016

本文实例讲述了AngularJS中指令的四种基本形式。分享给大家供大家参考,具体如下:

指令的四种基本形式中,

注意注释型指令 M 的使用方法是 <!--  directive:指令名称  --> 注意左右俩测必须有空格才会正常识别

所有指令是可以相互组合 的,不写restrict ,将会默认为A属性 指令要支持IE8 浏览器 一般最好将指令设置为属性

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <elementtag>E</elementtag>
    <div attr>A</div>
    <div class="classnamw">C</div>
    <!-- 注意注释变量两侧必须加上空格 否则不会正确执行这个指令 -->
    <!-- directive:commit -->
    <div></div>
  <script src="./js/angular.min.js"></script>
  <script>
    var app = angular.module('myapp',[]);
    app.directive('elementtag',function(){
      return {
        restrict:"E", //元素指令
        link:function(scope,element,attrs){
          console.log("this is a element");
        }
      };
    })
    .directive('attr',function(){
      return {
        restrict:"A", //属性指令
        link:function(scope,element,attrs){
          console.log("this is a attribute");
        }
      };
    })
    .directive('classnamw',function(){
      return {
        restrict:"C", //class 指令
        link:function(scope,element,attrs){
          console.log("this is a class");
        }
      };
    })
    .directive('commit',function(){
      return {
        restrict:"M", //注释指令
        link:function(scope,element,attrs){
          console.log("this is a commit");
        }
      };
    });
  </script>
</html>

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

Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 #Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 #Javascript
详解js中Json的语法与格式
Nov 22 #Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 #Javascript
javascript入门之string对象【新手必看】
Nov 22 #Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 #Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 #Javascript
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
详解django三种文件下载方式
2018/04/06 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python使用udp实现聊天器功能
2018/12/10 Python
Python同步遍历多个列表的示例
2019/02/19 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
教师党员公开承诺书
2014/03/25 职场文书
新教师培训方案
2014/06/08 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
Python可视化学习之seaborn调色盘
2022/02/24 Python
mysql 子查询的使用
2022/04/28 MySQL
在python中读取和写入CSV文件详情
2022/06/28 Python