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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
javascript常用经典算法详解
Jan 11 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
详解Vite的新体验
Feb 22 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/06 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
EntityManager都有哪些方法
2013/11/01 面试题
代理协议书
2014/04/22 职场文书
2014年安全生产责任书
2014/07/22 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
2014年化验员工作总结
2014/11/18 职场文书
英文辞职信范文
2015/05/13 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
maven依赖的version声明控制方式
2022/01/18 Java/Android
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
GO中sync包自由控制并发示例详解
2022/08/05 Golang