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

  • 相关阅读:
    枚举工具类:封装判断是否存在这个枚举
    MYSQL插入emoji报错解决方法Incorrect string value
    文件大小转换带上单位工具类(文件byte自动转KBMBGB)
    mysql 统计七天数据并分组
    mybatis plus 和 druid 版本导致LocalDateTime 不兼容问题
    Layui弹框中select下拉列表赋值回显
    查看环境版本
    Linux 常用命令
    安装jdk14的坑
    modbus_tk解析
  • 原文地址:https://www.cnblogs.com/lili-lili-lili-lili/p/6206495.html
Copyright © 2011-2022 走看看