1.      restrict

M 使用模板 A 属性扩展

2.      template,templateUrl,$templateCache

模板缓存

//注射器加载完所有模块时,此方法执行一次

myModule.run(function($templateCache){

$templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>");

});

myModule.directive("hello", function($templateCache) {

return {

restrict: 'AECM',

template: $templateCache.get("hello.html"),

replace: true

}

});

3.      replace / transclud

myModule.directive("hello", function() {

return {

restrict:"AE",

transclude:true,

template:"<div>Hello everyone!<div ng-transclude></div></div>"  把原来内容放在<div ng-transclude>处

}

});

指令之间可以相互嵌套

4.       Comile和link  操作元素,添加css,绑定事件

执行机制

加载   ng-app,确定边界

编译   遍历dom,查找所有指令,根据指令的template,raplace,transclue 转换DOM结构,

如果存在Comile就执行,自己编写的Comile要执行默认的Comile。

连接   每条指令的link会被执行,

操作dom 如绑定,添加监听,事件 ,

元素绑定作用域

Comile 对模板本身转化,仅在编译阶段只执行一次

Link    负责模板和视图动态关联

对指令的每个实例都执行一次

作用域在连接阶段才会被绑定到编译后的link函数上

5.      指令和控制器调用

控制器里放公共模块(指令) ,模块(指令)调用各自控制器里的方法。

<body ng-app="MyModule">

<div ng-controller="MyCtrl">

<loader howToLoad="loadData()"> 滑动加载 </loader>  通过自定义属性传递自己特定方法

</div>

<div ng-controller="MyCtrl2">

<loader howToLoad="loadData2()"> 滑动加载 </loader>

</div>

</body>

<script>

var myModule = angular.module("MyModule", []);

myModule.controller('MyCtrl', ['$scope', function($scope){

$scope.loadData=function(){

console.log("加载数据中...");

}

}]);

myModule.controller('MyCtrl2', ['$scope', function($scope){

$scope.loadData2=function(){

console.log("加载数据中...22222");

}

}]);

myModule.directive("loader", function() {

return {

restrict:"AE",

link:function(scope,element,attrs){

element.bind('mouseenter', function(event) {            绑定鼠标事件

//scope.loadData();

// scope.$apply("loadData()");

// 注意这里的坑,howToLoad会被转换成小写的howtoload

scope.$apply(attrs.howtoload);  一定的用小写

});

}

}

});

</script>

6.      指令和指令调用

通过指令内部方法暴露在controller里给外面调用,通过依赖,注入

a.指令的方法放在controller link

如果指令的一些方法暴露给外部使用,则把方法放在controller ,link是处理指令内部事务的,如绑定

b.独立scope作用域

c.require: '^superman'   本指令依赖superman指令

d.公用模块(指令),扩展属性模块(指令)

<supermanstrength>动感超人---力量</superman>

<superman strength speed>动感超人2---力量+敏捷</superman>

<superman strength speed light>动感超人3---力量+敏捷+发光</superman>

var myModule = angular.module("MyModule", []);

myModule.directive("superman", function() {

return {

scope: {},                                   创建独立作用域每个模块有自己独立的作用域

restrict: 'AE',

controller: function($scope) {          模块内部的控制,为外部使用

$scope.abilities = [];                      添加属性集合

this.addStrength = function() {              addStrength,暴露给外面的方法,strength 添加的属性

$scope.abilities.push("strength");

};

this.addSpeed = function() {

$scope.abilities.push("speed");

};

this.addLight = function() {

$scope.abilities.push("light");

};

},

link: function(scope, element, attrs) {

element.addClass('btn btn-primary');        添加样式

element.bind("mouseenter", function() {      绑定事件,绑定数据

console.log(scope.abilities);

});

}

}

});

myModule.directive("strength", function() {

return {

require: '^superman',                     本指令依赖superman指令,link里就有supermanCtrl参数

link: function(scope, element, attrs, supermanCtrl) {

supermanCtrl.addStrength();     自动注射到link函数里,可以调用superman里暴露的addStrength

}

}

});

myModule.directive("speed", function() {

return {

require: '^superman',

link: function(scope, element, attrs, supermanCtrl) {

supermanCtrl.addSpeed();

}

}

});

myModule.directive("light", function() {

return {

require: '^superman',

link: function(scope, element, attrs, supermanCtrl) {

supermanCtrl.addLight();

}

}

});

7.      scope绑定策略

指令独立scope,指令间相互不影响

属性绑定,对象绑定,方法绑定

@ 绑定字符串的,把当前属性做字符串传递,可绑定来自外层的scope,在属性值中插入{{}}

<body ng-app="MyModule">

<div ng-controller="MyCtrl">

<drink flavor="{{ctrlFlavor}}"></drink>

……

myModule.controller('MyCtrl', ['$scope', function($scope){

$scope.ctrlFlavor="百威";

}])

myModule.directive("drink", function() {

return {

restrict:'AE',

scope:{

flavor:'@'

},

template:"<div>{{flavor}}</div>"

// link:function(scope,element,attrs){

//    scope.flavor=attrs.flavor;

// }

}

});

= 于父scope双向绑定 ,调用父层scope

<body ng-app="MyModule">

<div ng-controller="MyCtrl">

Ctrl: <input type="text" ng-model="ctrlFlavor"> <br>

Directive: <drink flavor="ctrlFlavor"></drink>  <br>

……

myModule.controller('MyCtrl', ['$scope', function($scope){

$scope.ctrlFlavor="百威";

}])

myModule.directive("drink", function() {

return {

restrict:'AE',

scope:{

flavor:'='

},

template:'<input type="text" ng-model="flavor"/>'

}

});

& 传递一个来自父层 scope的函数,稍后调用

<div ng-controller="MyCtrl">

<greeting greet="sayHello(name)"></greeting>

<greeting greet="sayHello(name)"></greeting>

</div>

myModule.controller('MyCtrl', ['$scope', function($scope){

$scope.sayHello=function(name){

alert("Hello "+name);

}

}])

myModule.directive("greeting", function() {        模板上绑定控制器的方法

return {

restrict:'AE',

scope:{

greet:'&'

},

template:'<input type="text" ng-model="userName" /><br/>'+

'<button class="btn btn-default" ng-click="greet({name:userName})">

Greeting</button><br/>'

}

});

8.      内置指令

Form  可嵌套,自动校验,input扩展,样式扩展,输入项校验器

<form name="form" class="css-form" novalidate>

Name: <input type="text" ng-model="user.name" name="uName" required /><br/>

E-mail: <input type="email" ng-model="user.email" name="uEmail" required /><br/>

<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">

Invalid:

<span ng-show="form.uEmail.$error.required">Tell us your email.</span>

<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>

</div><br/>

Gender: <input type="radio" ng-model="user.gender" value="male" />

Male  <input type="radio" ng-model="user.gender" value="female" /><br/>

Female <input type="checkbox" ng-model="user.agree" name="userAgree" required />

I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />

<div ng-show="!user.agree || !user.agreeSign">

Please agree and sign.

</div>

<button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>

<button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>

</form>

function Controller($scope) {

$scope.master = {};

$scope.update = function(user) {

$scope.master = angular.copy(user);

};

$scope.reset = function() {

$scope.user = angular.copy($scope.master);

};

$scope.isUnchanged = function(user) {

return angular.equals(user, $scope.master);

};

$scope.reset();

}

Ngbind

事件处理

9.      自定义指令

<div ng-controller='SomeController'>

<expander class='expander' expander-title='title'>     自定义指令 属性 及属性值

{{text}}

</expander>

</div>

var expanderModule=angular.module('expanderModule', []);

expanderModule.directive('expander', function() {

return {

restrict : 'EA',

replace : true,

transclude : true,

scope : {

title : '=expanderTitle'                   title关联expander-title 的值对象

},

template : '<div>'

+ '<div class="title" ng-click="toggle()">{{title}}</div>'          使用link里定义函数

+ '<div class="body" ng-show="showMe" ng-transclude></div>'

+ '</div>',

link : function(scope, element, attrs) {

scope.showMe = false;

scope.toggle = function() {

scope.showMe = !scope.showMe;

}

}

}

});

expanderModule.controller('SomeController',function($scope) {

$scope.title = '点击展开';

$scope.text = '这里是内部的内容。';

});

10.  自定义指令2

两层嵌套,外层accordion内层 expander,根据数组里的expanders 决定创建多少个expander

<accordion>

<expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>

{{expander.text}}

</expander>

</accordion>

expModule.controller("SomeController",function($scope) {

$scope.expanders = [{

title : 'Click me to expand',

text : 'Hi there folks, I am the content that was hidden but is now shown.'

}, {

title : 'Click this',

text : 'I am even better text than you have seen previously'

}, {

title : 'Test',

text : 'test'

}];

});

var expModule=angular.module('expanderModule',[])

expModule.directive('accordion', function() {

return {

restrict : 'EA',

replace : true,

transclude : true,

template : '<div ng-transclude></div>',

controller : function() {

var expanders = [];

this.gotOpened = function(selectedExpander) {

angular.forEach(expanders, function(expander) {

if (selectedExpander != expander) {

expander.showMe = false;

}

});

}

this.addExpander = function(expander) {

expanders.push(expander);

}

}

}

});

expModule.directive('expander', function() {

return {

restrict : 'EA',

replace : true,

transclude : true,

require : '^?accordion',

scope : {

title : '=expanderTitle'

},

template : '<div>'

+ '<div class="title" ng-click="toggle()">{{title}}</div>'

+ '<div class="body" ng-show="showMe" ng-transclude></div>'

+ '</div>',

link : function(scope, element, attrs, accordionController) {

scope.showMe = false;

accordionController.addExpander(scope);

scope.toggle = function toggle() {

scope.showMe = !scope.showMe;

accordionController.gotOpened(scope);

}

}

}

});

angularUI

http://miniui.com

表单,布局,导航,列表   重量级组件Form, DatePicker, Fileupdate, Tree ,DataGrid

http://Sencha.com

Angularjs学习笔记10_directive3的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

随机推荐

  1. 【分块】hdu5057 Argestes and Sequence

    分块,v[i][j][k]表示第i块内第j位是k的元素数.非常好写.注意初始化 要注意题意,①第i位是从右往左算的. ②若x没有第i位,则用前导零补齐10位.比如103---->00000001 ...

  2. 【可持久化Trie】bzoj3261 最大异或和

    对原序列取前缀异或值,变成pre[1...N],然后询问等价于求max{a[N]^x^pre[i]}(l-1<=i<=r-1). #include<cstdio> #defin ...

  3. 前端基础-HTML标记语言

    阅读目录 一. HTML标签与文档结构 二. HTML标签详细语法与注意点 三. HTML中标签分类 四. HTML注释 一. HTML标签与文档结构 HTML作为一门标记语言,是通过各种各样的标签来 ...

  4. 1.3(学习笔记)JSP(Java Server Pages)内置对象

    一.内置对象 内置对象又称内建对象.隐式对象,是由服务器自动创建实例化的, 用户在使用时不需要显示的创建,可直接使用. jsp内置对象名称,类型及作用域 Scope代表该内置对象的作用范围,page表 ...

  5. 【R笔记】日期处理

    R语言学习笔记:日期处理 1.取出当前日期 Sys.Date() [1] "2014-10-29" date() #注意:这种方法返回的是字符串类型 [1] "Wed O ...

  6. inline-block 前世今生(转)

    曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...

  7. NSPredicate 谓词总结 数组过滤 模糊匹配

    NSPredicate 用于指定过滤条件,主要用于从集合中分拣出符合条件的对象,也可以用于字符串的正则匹配. NSPredicate常用方法介绍 1.创建NSPredicate(相当于创建一个过滤条件 ...

  8. 理解面向对象编程---C#控制台实现52张扑克牌的分法

    52张牌随机分给4个玩家,要求每个玩家的牌用一个一维数组表示. 我们采用模拟大法.初始化一副扑克牌,洗牌,发牌. using System; using System.Collections.Gene ...

  9. JAMon监控SQL执行时间

    JAMon监控web工程方法的调用性能 http://www.cnblogs.com/zfc2201/p/3786365.html 这往往篇文章主要告诉大家如何监控web方法调用时间,在这个基础这上, ...

  10. D3.js系列——交互式操作和布局

    一.图表交互操作 与图表的交互,指在图形元素上设置一个或多个监听器,当事件发生时,做出相应的反应. 交互,指的是用户输入了某种指令,程序接受到指令之后必须做出某种响应.对可视化图表来说,交互能使图表更 ...