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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
浅析is_writable的php实现
2013/06/18 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
php MessagePack介绍
2013/10/06 PHP
初识laravel5
2015/03/02 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jquery each()源代码
2011/02/14 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
python从入门到精通(DAY 2)
2015/12/20 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
儿科护理实习自我鉴定
2013/09/19 职场文书
临床医学专业毕业生的自我评价
2013/10/17 职场文书
服装促销活动方案
2014/02/23 职场文书
大学生就业策划书范文
2014/04/04 职场文书
车辆转让协议书
2014/04/15 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
部门2014年度工作总结
2014/11/12 职场文书
地球上的星星观后感
2015/06/02 职场文书
电力培训学习心得体会
2016/01/11 职场文书