• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJS中指令的四种基本形式实例分析

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

作者:栁罗风尘 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs项目实例,angularjs实例,angularjs开发实例,angularjs实例教程,angularjs 自动化实例等相关知识,栁罗风尘 希望在学习及工作中可以帮助到您

本文实例讲述了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>

</div>

希望本文所述对大家AngularJS程序设计有所帮助。

</div>

您可能想查找下面的文章:

  • AngularJS——总结笔记
  • AngularJS实现的回到顶部指令功能实例
  • AngularJS使用拦截器实现的loading功能完整实例
  • angularjs中使用ng-bind-html和ng-include的实例
  • AngularJS双向绑定和依赖反转实例详解
  • AngularJS中的拦截器实例详解
  • AngularJS ui-router (嵌套路由)实例
  • AngularJS实现路由实例
  • AngularJs上传前预览图片的实例代码
  • AngularJS的依赖注入实例分析(使用module和injector)

相关文章

  • 2017-05-30Angular 常用指令实例总结整理
  • 2017-05-30总结十个Angular.js由浅入深的面试问题
  • 2017-05-30angular中实现控制器之间传递参数的方式
  • 2017-05-30AngularJS基础 ng-mouseover 指令简单示例
  • 2017-05-30AngularJS中一般函数参数传递用法分析
  • 2017-05-30AngularJs解决跨域问题案例详解(简单方法)
  • 2017-05-30强大的 Angular 表单验证功能详细介绍
  • 2017-05-30AngularJS 简单应用实例
  • 2017-05-30AngularJS出现$http异步后台无法获取请求参数问题的解决方法
  • 2017-05-30详解AngularJS中$filter过滤器使用(自定义过滤器)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • angularJS提交表单(form)
    • AngularJS双向绑定和依赖反转实例详解
    • 简介可以自动完成UI的AngularJS工具angular-smarty
    • AngularJs Understanding the Controller Component
    • AngularJS 自定义指令详解及实例代码
    • angularjs 中$apply,$digest,$watch详解
    • AngularJS实现页面定时刷新
    • 基于angular中的重要指令详解($eval,$parse和$compile)
    • 浅谈Angularjs link和compile的使用区别
    • AngularJS中$watch和$timeout的使用示例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有