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 相关文章推荐
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
Vue.use源码学习小结
Jun 20 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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 zend 相对路径问题
2009/01/12 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python装饰器用法示例小结
2018/02/11 Python
Python中单例模式总结
2018/02/20 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
单位成立周年感言
2014/01/26 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
项目合作意向书模板
2014/07/29 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
python基础学习之递归函数知识总结
2021/05/26 Python