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脚本类
Aug 27 Javascript
js tab 选项卡
Apr 26 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JS表的模拟方法
Feb 05 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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下使用无限生命期Session的方法
2007/03/16 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
Python内置异常类型全面汇总
2020/05/28 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
Unix如何添加新的用户
2014/08/20 面试题
50岁生日感言
2014/01/23 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
办公室岗位职责
2014/02/12 职场文书
企业员工培训感言
2014/02/26 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技