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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
支付宝小程序tabbar底部导航
Nov 06 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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
php类常量的使用详解
2013/06/08 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python入门篇之列表和元组
2014/10/17 Python
Python循环语句之break与continue的用法
2015/10/14 Python
对python中的argv和argc使用详解
2018/12/15 Python
python构造函数init实例方法解析
2020/01/19 Python
Python修改列表值问题解决方案
2020/03/06 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
捐款活动总结
2014/08/27 职场文书
安全先进班组材料
2014/12/26 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
python某漫画app逆向
2021/03/31 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android