angularjs学习之七(angularjs中指令的四种基本形式)

原创 2015年07月08日 09:18:43

指令的四种基本形式中,

注意注释型指令 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 学习笔记 -- 指令(Directive)

AngularJS 指令学习笔记AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义。完整的AngularJS指...
  • shenlei19911210
  • shenlei19911210
  • 2016年04月17日 14:55
  • 5067

angularjs指令定义中的require参数

require - 请求另外的controller,传入当前directive的link function中。require需要传入一个directive controller的名称。如果找不到这个名...
  • u014788227
  • u014788227
  • 2015年12月28日 09:21
  • 6441

AngularJS常用指令

这篇文章主要介绍了整理AngularJS中的一些常用指令、事件和服务,angularjs常用指令:ng-app,ng-repeat,ng-switch,ng-hidden,ng-show,ng-opt...
  • u010870890
  • u010870890
  • 2015年11月03日 17:19
  • 3873

angularjs中的几种服务的详细分析(转)

总体介绍在一个分层良好的 Angular 应用中,Controller 这一层应该很薄。也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 Service 里。为此,理解 AngularJS 中的...
  • qq_29287973
  • qq_29287973
  • 2017年07月01日 18:01
  • 650

angularjs学习系(3)指令的@=&

1:先说指令域scope的@     我觉得描述很费劲,直接用代码来阐述:     angularjs.html      ...
  • ikscher
  • ikscher
  • 2015年04月02日 14:51
  • 19370

angularJS 自定义指令间的相互交互

angularJS 自定义指令间的相互交互angularJS 自定义指令 transclude:当元素标签需要嵌套时使用,与ng-transclude配合使用。默认值为false不能使用嵌套,tru...
  • outsiderlcy
  • outsiderlcy
  • 2016年11月10日 09:12
  • 3055

AngularJS 最常用指令的功能

在这里我整理了一下 AngularJS 中常用到的指令,包含它们的书写格式及指令的用法,功能。不过这里的整理有些不完整,不过在后面的使用过程中会逐步的去完善,里面有些知识点是摘录自网络上的,但是我都去...
  • zhangh8627
  • zhangh8627
  • 2016年07月13日 14:12
  • 1127

AngularJs 指令directive之controller,link,compile

关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller。不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名。另外一个需知道的...
  • alex8046
  • alex8046
  • 2016年08月24日 14:08
  • 1621

Angularjs 学习笔记(一)基础

1.简介: Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 Ang...
  • qq_25178609
  • qq_25178609
  • 2016年10月02日 16:13
  • 519

angularJS 自定义指令 属性:transclude、priority、terminal

自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中。 属性priority,设置该指令的优先级,优先级大的先执行,默认指...
  • xuanwuziyou
  • xuanwuziyou
  • 2016年10月21日 15:23
  • 1169
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angularjs学习之七(angularjs中指令的四种基本形式)
举报原因:
原因补充:

(最多只允许输入30个字)