Angularjs学习笔记10_directive3
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
表单，布局，导航，列表 重量级组件Form， DatePicker， Fileupdate， Tree ，DataGrid
Angularjs学习笔记10_directive3的更多相关文章
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
随机推荐
- [美团 CodeM 初赛 Round A]最长树链
题目大意: 给你一棵带点权的树,找出一个最长的树链满足链上点权的最大公因数不为1. 思路: 暴力DP. 对于每个点,记录一下以这个点为一个端点的所有链的最大公因数及长度. 然后暴力转移一下,时间复杂度 ...
- 将Java程序打jar包并运行
1)接着上篇博客继续说手动编译之后,将代码打成jar包,然后直接“java -jar lz.jar"运行不成功的问题.还是先上代码: 这个是Demo类: package org.lz.dem ...
- JQuery给动态HTML绑定事件
说明:涉及到事件委托原理,这里不深究了. 直接使用live或者delegate去实现.网上说on也可以,没测试过. 注意:live在新版的JQuery已经取消.on在比较新的版本才支持. 参考: ht ...
- ethtool 命令输出的注意点--网卡参数
http://blog.csdn.net/msdnchina/article/details/70339689
- [Git] 关于refs/for/ 和refs/heads/
转载自: http://lishicongli.blog.163.com/blog/static/146825902013213439500/ 1. 这个不是git的规则,而是gerrit的规 ...
- 《Hadoop基础教程》之初识Hadoop 【转】
Hadoop一直是我想学习的技术,正巧最近项目组要做电子商城,我就开始研究Hadoop,虽然最后鉴定Hadoop不适用我们的项目,但是我会继续研究下去,技多不压身. <Hadoop基础教程> ...
- Python 自用代码（拆分txt文件）
现有一个28G的txt文件,里面每一行是一个分词过的专利全文文档,一共370多万行.我需要把它按每五万行为单位做成一个json文件,格式大致如下: [{"id":"100 ...
- mongodb 踩坑记录
Map-Reduce Map-Reduce 是 mongodb 处理批量数据的大杀器,凡是数据量大并且定时处理能满足需求的,都可以试着扔给 mongodb,让它去 Map-Reduce. 以下截取自文 ...
- Node.js meitulu图片批量下载爬虫1.04版
//====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...
- MPTCP 源码分析(七) 拥塞控制
简述 MPTCP的拥塞控制对TCP的拥塞控制的线性增加阶段进行了修改,而慢启动,快速重传. 快速恢复都没有改变.每条子路径拥有自己的cwnd,MPTCP的拥塞算法主要关心cwnd的改变. ...