编程 Javascript

AngularJS中指令的四种基本形式实例分析

Posted in Javascript onNovember 22, 2016

本文实例讲述了AngularJS中指令的四种基本形式。分享给大家供大家参考，具体如下：

指令的四种基本形式中，

注意注释型指令 M 的使用方法是  注意左右俩测必须有空格才会正常识别

所有指令是可以相互组合的，不写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程序设计有所帮助。

AngularJS中指令的四种基本形式实例分析

- Author -

?温薹绯

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

关于JavaScript的一些看法

May 27 Javascript

jquery下onpropertychange事件的绑定方法

Aug 01 Javascript

JavaScript中数组的排序、乱序和搜索实现代码

Nov 30 Javascript

node.js chat程序如何实现Ajax long-polling长链接刷新模式

Mar 13 Javascript

javascript中数组的sort()方法的使用介绍

Dec 18 Javascript

JavaScript实现点击单选按钮改变输入框中文本域内容的方法

Aug 12 Javascript

总结十个Angular.js由浅入深的面试问题

Aug 26 Javascript

JS遍历对象属性的方法示例

Jan 10 Javascript

JavaScript转换数据库DateTime字段类型方法

Jun 27 Javascript

Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决

Jan 27 Javascript

vue移动端项目缓存问题实践记录

Oct 29 Javascript

ES6基础之解构赋值(destructuring assignment)

Feb 21 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