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 window.event对象详尽解析
Feb 17 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
react 项目中引入图片的几种方式
Jun 02 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的库,结果发现很多东西
2006/12/31 PHP
PHP 验证码的实现代码
2011/07/17 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python入门教程 python入门神图一张
2018/03/05 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
EJB的几种类型
2012/08/15 面试题
商场促销活动方案
2014/02/08 职场文书
五一活动标语
2014/06/30 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
八月迷情观后感
2015/06/11 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python