Angularjs中编写指令模版

 1 angular.module(‘moduleName‘, []).directive(
 2         ‘namespaceDirectiveName‘,
 3         [ function() {
 4             return {
 5                 restrict : ‘‘,// 描述指令在模版中的使用方式,包括元素E,属性A,CSS样式类,注释或者以上方式的任意主和
 6                 priority : 0,// 设置指令在模版中的执行顺序,顺序是相对于其他指令而言
 7                 template : ‘‘,// 以字符串的形式编写一个内联模版,如果以url的形式提供模版,此属性会被忽略
 8                 templateUrl : ‘‘,// 描述加载模版所需要的url。如果使用temlate形式提供模版,此属性会被忽略
 9                 replace : true,// 如果设置为true则替换指令所在的元素,否则就追加到元素内部
10                 transclude : true,// 把指令元素原来的子节点移动到一个新模版内部
11                 scope : ‘bool or object‘,// 为当前指令创建一个新的作用域,而不是使之继承父作用域
12                 constroller : function($scope, $element, $attrs, $transclude) {
13                     // 创建一个控制器,它会暴露一个API,利用这个API可以在多个指令之间进行通信
14                 },
15                 require : ‘‘,// 要求必须存在另个一指令,当前指令才能执行
16                 link : function(scope, iElement, iAttrs) {
17                     // 使用编程的方式修改最终生成的dom元素的实例,添加事件监听器,并设置数据绑定
18                 },
19                 compile : function(tElement, tAttrs, transclude) {
20                     //在使用ng-repeat用编程的方式修改dom模版,从而实现一个指令跨越多个指令的特性。
21                     //也可以返回一个link函数,可以用它来修改产生元素的示例
22                     return {
23                         pre : function preLink(scope, iElement, iAttrs,
24                                 controller) {
25                         },
26                         post : function postLink(scope, iElement, iAttrs,
27                                 controller) {
28                         }
29
30                     }
31                 }
32             };
33         } ]);
时间: 2024-11-08 21:22:21

Angularjs中编写指令模版的相关文章

AngularJS中的指令

欢迎大家讨论与指导 : ) 明天天会继续更新本文O(∩_∩)O  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求.  一.创建自定义指令   一 . 1 命名规则  我们要在创建指令时使用峰驼式命名,例如指令是 <div unordered-list></div>  在声明指令时我们需要这样子写 app.directive("unorderedList

浅谈AngularJS中的指令和指令间的相互通信

说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用. <h

angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)

angular js 中模板的使用,事件绑定以及指令与指令之间的交互 对应教学视频地址(需翻墙):angularjs教学视频 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="ShieldController"> <div&g

angularJS中自定义指令

学习了angularJS一周,但是大部分时间被自定义指令占用了.博主表示自学互联网好心塞的,发现问题的视觉很狭窄,这比解决问题要更难.这篇文章首先介绍了自定义,然后介绍了在使用自定义指令遇到的问题. 代码模板: var myModule = angular.module("myModule",[]); myModule.directive('directiveName',function(){ return{ restrict:string, template:string, temp

AngularJS中Directive指令系列 - bindToController属性的使用

默认false.这个属性用来绑定scope的属性直接赋给controller.可以为true或者和scope相同格式的对象. 此外使用此属性,要设置controller的别名,通常通过"controllerAs"来设置. 如果一个directive里同时使用了bindToController和scope,并且是object.那么bindToController会覆盖scope.

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

AngularJs中的directives(指令)

一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 调用自定义指令的4种方式:元素.属性.样式类.注释. 常用的是前两种,实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

angularJS中的ng-show、ng-if指令

angularJS中的ng-show.ng-hide.ng-if指令都可以用来控制dom元素的显示或隐藏. 1. ng-show和ng-hide 根据所给表达式的值来显示或隐藏HTML元素.元素会渲染出来,只是通过css隐藏了. 即DOM中会存在, 通过选择符可以获取到此元素的. 2.ng-if指令 可以根据表达式的值在DOM中生成或移除一个元素.如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除(DOM中不会存在, 通过选择符无法选择到),否则生成一个新的元素插入DO

angularjs中常用的ng指令介绍【转载】

原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提供的或者自定义的标签和属性,用来增强HTML表现力. 标记(markup).即双大括号{{}},可将数据单向绑定到HTML中. 过滤器(filter).用来格式化输出数据. 表单控制.用来增强表单的验证功能. 其中,指令无疑是使用量最大的,ng内置了很多指令用来控制模板,如ng-repeat,ng-