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利用div背景,做一个竖线的效果。
Nov 22 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
javascript常见操作汇总
Sep 03 Javascript
Javascript 构造函数详解
Oct 22 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
基于canvasJS在PHP中制作动态图表
May 30 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 curl 获取响应的状态码的方法
2014/01/13 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
smarty缓存用法分析
2014/12/16 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
JS二分查找算法详解
2017/11/01 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
ES6之模版字符串的具体使用
2018/05/17 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
python IP地址转整数
2020/11/20 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
30年同学聚会邀请函
2014/01/25 职场文书
安全标准化实施方案
2014/02/20 职场文书
护士自荐信范文
2015/03/25 职场文书
演讲比赛主持词
2015/06/29 职场文书
《假如》教学反思
2016/02/17 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python