Angular JS 中 指令详解

Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析。

一个Angular js 指令(directive)的生命周期 开始于$compile方法 结束于$link方法。

angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function() {
  return {
    restrict: String,
    priority: Number,
    terminal: Boolean,
    template: String or Template Function:
      function(tElement, tAttrs) (...},
    templateUrl: String,
    replace: Boolean or String,
    scope: Boolean or Object,
    transclude: Boolean,
    controller: String or
      function(scope, element, attrs, transclude, otherInjectables) { ... },
    controllerAs: String,
    require: String,
    link: function(scope, iElement, iAttrs) { ... },
    compile: // 返回一个对象或连接函数,如下所示:
      function(tElement, tAttrs, transclude) {
        return {
          pre: function(scope, iElement, iAttrs, controller) { ... },
          post: function(scope, iElement, iAttrs, controller) { ... }
        }
        // 或者
        return function postLink(...) { ... }

      }
   };
});

原文地址:https://www.cnblogs.com/Pikzas/p/8506899.html

时间: 2024-08-06 05:20:43

Angular JS 中 指令详解的相关文章

angular的自定义指令---详解

1.angualr指令 在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的指令也是基于下面所用到的步骤来创建的,只不过他都添加到了全局中,所以可以直接使用: 2.创建自定义指令 首先创建模块app,再使用app的服务directive方法, 创建指令内容第一个参数自定义的名字,第二个参数是自定义参数属性对象,该对象包括的属性基本在代码注释解释清楚: // a.创建模块 v

js中eval详解,用Js的eval解析JSON中的注意点

先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法“{}”并不能返回一个值,需要用括号括起来才会返回值,简单示例如下: var s1='"a" + 2'; //表达式var s2='{a:2}'; //语句alert(eval(s1)); //->'a2'alert(eval(s2)); //->und

JS中JSON详解

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包. 在JSON中,有两种结构:对象和数组. 1. 一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):&qu

js中 json详解

json的语法可以表示以下三种类型的值. 1.简单值:可以在json中表示字符串.数值.布尔和null. 2.对象:对象作为一种复杂的数据类型,表示一组有序的键值对儿. 3.数组:数组也是一种复杂的数据类型,表示一组有序的值列表,可以通过数值索引来访问其中的值. json不支持变量.函数或对象实例,它就是一种表示结构化数据的格式. 1.1:简单值: 如下10,“aa”,json字符串与js字符串最大的区别是json字符串必须使用双引号布尔与null也是有效的json形式. 2.1:对象 对象字面

js中apply详解

学习http://www.cnblogs.com/delin/archive/2010/06/17/1759695.html 1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } return destinatio

js中eval详解

先来说eval的用法,内容比较简单,熟悉的可以跳过 eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法“{}”并不能返回一个值,需要用括号括起来才会返回值,简单示例如下: var code1='"a" + 2'; //表达式 varcode2='{a:2}'; //语句 alert(eval(code1)); //->'a2' alert(eval(code

Angular.js中处理页面闪烁的方法详解

Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做"Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.".

Angular.js中的指令——易懂全解析

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">angular.js中,指令是最基础的

Node.js继承中的静态类对象(《node.js开发实战详解》书中一些错误的改正)

今天气真好,最近挂掉一些面试之后心情略失落. 神马都是浮云,要永远做好世界第二. 不多提了,你问我心态为啥变好了.-------都是情怀,,. 嗯啊,最近在研究node. 别人问?你这水平还node... 哈哈哈,好伤心.... 不多提了,言归正传. 神马模块化神马的先就不多讲了,就一个module.export和export区别,后者对象的属性属于前者,逆命题不成立. 还有util.inherits(A,B)这个API注意一下A只会继承B的原型方法,原型以外的不会继承.不是说原型中数据是共享的