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表格分页实现代码
Sep 18 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
js控制frameSet示例
Sep 10 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
vue component组件使用方法详解
Jul 14 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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设计模式 Prototype (原型模式)代码
2011/06/26 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
解决laravel session失效的问题
2019/10/14 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
js右键菜单效果代码
2007/07/21 Javascript
javascript new 需不需要继续使用
2009/07/02 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python求解汉诺塔游戏
2020/07/09 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
建筑专业自我鉴定
2013/10/22 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
运动会开幕式解说词
2014/02/05 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
困难补助申请报告
2015/05/19 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js