zoukankan      html  css  js  c++  java
  • AngularJS中指令的四种基本形式实例分析

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

    指令的四种基本形式中,

    注意注释型指令 M 的使用方法是 <!--  directive:指令名称  --> 注意左右俩测必须有空格才会正常识别

    所有指令是可以相互组合 的,不写restrict ,将会默认为A属性 指令要支持IE8 浏览器 一般最好将指令设置为属性

     1 <!doctype html>
     2 <html ng-app="myapp">
     3   <head>
     4     <meta charset="utf-8"/>
     5   </head>
     6   <body>
     7     <elementtag>E</elementtag>
     8     <div attr>A</div>
     9     <div class="classnamw">C</div>
    10     <!-- 注意注释变量两侧必须加上空格 否则不会正确执行这个指令 -->
    11     <!-- directive:commit -->
    12     <div></div>
    13   <script src="./js/angular.min.js"></script>
    14   <script>
    15     var app = angular.module('myapp',[]);
    16     app.directive('elementtag',function(){
    17       return {
    18         restrict:"E", //元素指令
    19         link:function(scope,element,attrs){
    20           console.log("this is a element");
    21         }
    22       };
    23     })
    24     .directive('attr',function(){
    25       return {
    26         restrict:"A", //属性指令
    27         link:function(scope,element,attrs){
    28           console.log("this is a attribute");
    29         }
    30       };
    31     })
    32     .directive('classnamw',function(){
    33       return {
    34         restrict:"C", //class 指令
    35         link:function(scope,element,attrs){
    36           console.log("this is a class");
    37         }
    38       };
    39     })
    40     .directive('commit',function(){
    41       return {
    42         restrict:"M", //注释指令
    43         link:function(scope,element,attrs){
    44           console.log("this is a commit");
    45         }
    46       };
    47     });
    48   </script>
    49 </html>

    原始地址:http://www.jb51.net/article/97961.htm

  • 相关阅读:
    Linux文本处理
    鲜为人知的maven标签解说
    springboot整合websocket高级版
    springboot整合swagger。完爆前后端调试
    java的干儿子锁Lock
    AbstractQueuedSynchronizer(AQS)抽丝剥茧深入了解JUC框架原理
    【优雅写代码系统】springboot+mybatis+pagehelper+mybatisplus+druid教你如何优雅写代码
    居然还有人这样解说mybatis运行原理
    mybatis精讲(七)--动态sql
    基于redis实现分布式锁
  • 原文地址:https://www.cnblogs.com/lili-lili-lili-lili/p/6206495.html
Copyright © 2011-2022 走看看