js框架——angular.js（2）
1. 模块的利用扩充
模块的名称也可以当做变量使用，例如：
<body ng-app>
<label><input type="checkbox" ng-model="checked"/>Toggle Button</label>
<button ng-disabled="checked">Press me</button>
</body>
2. directive指令机制
指令的作用：实现语义化标签
在首页上我们可以随便定义标签使用，这一段标签里可以书写内容也可以不写。后台js可以使用方法替换这段内容，替换的可以是一大段html代码，甚至可以是一个完整的页面：
<body ng-app="MyApp">
<my>
</my>
</body>
var app = angular.module("MyApp", []);
app.directive("myWidgetFirst", function() {
var linkFunction_nice = function(scope, element, attributes) {
var paragraph = element.children()[0];
//ag内部实现的一个选择器操作
$(paragraph).on("click", function() {
$(this).css({ "background-color": "red" });
});
};
return {
restrict: "E", //暴露的一个元素，若是‘A’则是属性
replace: true,
templateUrl: 'js/template/test_index.html'
};
});
上面一个就是替换标签<myWidgetFirst>的。
返回的内容在return当中，第一个restrict后面返回的参数有4中，
E，element代表元素 A代表属性，C代表样式css，M代表注释。
replace:true是否替换，flase就不会替换
templateUrl:替换的网页，如果想要替换其他东西，如html代码，可以这么写：
template:"<div>aaa</div>"
directive指令机制的原理是自定义一个属性或者标签来使用，因为一般来说angular自带的标签不是很够用，所以需要额外的根据需要去定义。如果定义的是标签，如
<apple></apple>
那么，这个标签返回内容return中的restirct的值便是E，如果定义的是属性，如：
<p apple="appletree" yahaha="yohoho"></p>
那么返回值里面的return中的restrict的值就是A。
总结一下，directive的return中应该有多少东西——
var phonecatDirectives = angular.module('phonecatDirectives', []);
phonecatDirectives.directive('directiveName', function($inject) {
return {
template: '<div></div>',
replace: false,
transclude: true,
restrict: 'E',
scope: { ... },
controller: function($scope, $element){ .... },
compile: function(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
},
link: function(scope, iElement, iAttrs) { ... }
};
})
完整来讲，应该有这么多。但是我们并不是都要使用，选择需要的就可以。现在对所有的属性进行翻译-
template：模板，即替换内容，如果replace 为true，则将模版内容替换当前的HTML元素，并将原来元素的属性、class一并迁移；如果为false，则将模版元素当作当前元素的子元素处理。
transculde：编译转换，一般模板中会出现带有ng-transclude属性的标签，这个值设为true的时候会启动编译，将里面的代码经过编译后输出：
app.directive("secondWidget", function(){
return {
restrict: "E",
transclude: true,
scope: {
title: '@title'
},
template: "<div ng-transclude>{{title}}</div>"
};
})
如这个，div中出现ng-transclude属性，后面的是{{title}}。
如果没有这个属性，那么这个secondWidget标签的内容会被模板替代，如果有这个属性，那么模板内容会将标签内容包裹起来放到里面。于是，上面的结果就是;
<second-widget title="aaa" class="ng-isolate-scope ng-scope"><div ng-transclude="" class="ng-binding">aaa
<p class="ng-scope">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, fugit, voluptate ad voluptas ullam sunt vitae eligendi asperiores consequuntur ex sequi quisquam rem animi ut modi unde neque optio in!</p>
</div></second-widget>
scope:定义，这是一个对象，对象里面有着各种各样定义的东西，如：
scope: {
title: '@title'
},
template: "<div ng-transclude>{{title}}</div>"
这里的title对应着下面的模板的title，而后面的字符串"@title"代表标签上title属性值，@代表单向绑定。
只写一个@其实也可以，但是属性值的名字就必须是变量的名字，如果属性名称发生改变就不行了。例如——
title: '@'
<div titlea="aaa"></div>
这种情况下就不行了，只有
<div title="aaa"></div>
才能使用。
有@，其实也有其他的符号，单向绑定@，双向绑定的=，还有函数专用的 &
但双向绑定没什么好讲的，关于函数必须讲一下：
app.directive("myWidgetExpr", function() {
var linkFunction = function(scope, element, attributes) {
scope.text = scope.fna({ count: 5 });
};
return {
restrict: "E",
template: "<p>{{text}}</p>",
link: linkFunction,
scope: {
fna: "&fn"
}
};
<my-widget-expr fn="count = count + 1"></my-widget-expr>
这个代码中，得到的结果是6.
标签中函数可以写一些简单的表达式，如上面的
"count = count + 1"
表达式写在引号当中，这个表达式可以有多个参数，但是每个参数都需要在后台声明，所有的参数都写在一个对象中：
scope.text = scope.fna({ count: 5 ,max:5});
你可以随便定义多个其他值不用，但不能让函数被调用的时候缺乏这个参数，做到宁滥勿缺。
这个对象中也可以写函数——
scope.text = scope.fna({ count: 5 ,max:function(count){
return count*2
}});
<my-widget-expr fn="max(2) "></my-widget-expr>
调用起来意外地好用。但是不知道为什么不能使用同一个对象的属性，如：
app.directive("myWidgetExpr", function() {
var linkFunction = function(scope, element, attributes) {
scope.ab={
a: 5 ,
// c:a,
b:function(){
alert(this.a)
}
}
scope.text = scope.fna(scope.ab);
// console.log(scope.ab.b())
console.log( scope.fna(scope.ab))
};
不知道为什么就是出错
3. 循环
如果我们需要给一个循环里面的元素添加组件，如给10个li添加单击事件，等重复编译一个组件内容的时候，我们需要在return中添加行为：
<body ng-app="MyApp">
<repeat-ntimes repeat="10">
<h1>Header 1</h1>
<p>This is the paragraph.</p>
</repeat-n-times> var app = angular.module("MyApp", []); app.directive("repeatNtimes", function() { return {
restrict: "E", compile: function(tElement, attrs) {
var content = tElement.children();
for (var i=1; i<attrs.repeat; i++) {
tElement.append(content.clone());
}
//当你在重复编译一个组件内容的时候，你需要在里return一个行为。
return function (scope, element, attrs) {
element.on("click", "h1", function() {
$(this).css({ "background-color": "red" });
});
};
}
};
});
4. require 模块引用
当我们需要在一个一个中加载其他控制器的属性或者变量的时候，就可以用require。
var app = angular.module("MyApp", []);
app.directive("basket", function() {
return {
restrict: "E",
controller: function($scope, $element, $attrs) {
$scope.content = [];
this.addApple = function() {
$scope.content.push("apple");
};
this.addOrange = function() {
$scope.content.push("orange");
};
},
link: function(scope, element) {
element.bind("mouseenter", function() {
console.log(scope.content);
});
}
};
});
app.directive("apple", function() {
return {
require: "basket",
link: function(scope, element, attrs, basketCtrl) {
basketCtrl.addApple();
}
};
});
app.directive("orange", function() {
return {
require: "basket",
link: function(scope, element, attrs, basketCtrlaa) {
basketCtrlaa.addOrange();
}
};
});
可以看到上面代码中的require连接的就是basket控制器，这个控制器也是第一段代码声明的。这里请注意link函数的第四个参数basketCtrl，这个参数代表的是引用的控制器，可以看到名字可以随便起但是最好遵循XXctrl这种起名方式。
js框架——angular.js（2）的更多相关文章
- js框架——angular.js(6)
1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...
- js框架——angular.js（5）
1. 3种过滤方式 <html> <head> <meta charset='utf-8'> <script src="js/angular.js& ...
- js框架——angular.js
这是一个前端用的框架,使用简单.详细介绍这里就不写了,主要介绍其语法和作用—— 1. 声明一个angular 如果想要使用一个angular代码,则需要在[想要使用angular的范围内写上ng-ap ...
- js框架——angular.js(4)
1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...
- js框架——angular.js（3）
1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个cur ...
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- vue.js与angular.js的区别（个人）
刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅 浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
随机推荐
- html5标准格式示代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- yali项目的slider
// 调用 var s41 = new slider({ target : '#slider411', titleActiveClass : 'j-active', itemActiveClass : ...
- asp.net URL DES加密 什在URL中的使用
DES 加密 有时会有 + = 这些特殊字符串 Server.UrlDecode(Request["UserName"]) //能解决 = 号,但是 +号会变成空格 HttpUt ...
- 利用NSURLSession完成的断点续传功能
首先是业务中的.h文件 #import <UIKit/UIKit.h> #import "DenglSingleton.h" @protocol DownLoadVCd ...
- 与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解
在引入了导航控制器UINavigationController和分栏控制器UITabBarController之后,我们在设置控件的frame的时候就需要注意避开导航栏UINavigationBar ...
- CentOS环境搭建(JDK安装、mysql安装、hadoop安装等)
1.1准备权限:让普通用户具备sudo执行权限 切换到root用户,su # vi /etc/sudoers/ 添加 koushengrui ALL=(ALL) ALL 这里很容易 ...
- HTML中加载flash方法
首先贴上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- HDU 5798 Stabilization
方法太厉害了....看了官方题解的做法....然后...想了很久很久才知道他想表达什么.... #pragma comment(linker, "/STACK:1024000000,1024 ...
- Windows 8/7下还原系统默认扩展名打开方式类型
在百度知道上如果你搜“改回选错的打开方式”,看到的大多数都是XP系统的方法,不管是批处理还是别的方法,但适用于Windows 8/7的只有修改注册表的方法. 因为Windows 7你也就根本找不到[工 ...
- java常量和变量的定义规则，变长参数的使用
首先是定义的一般规则,类名首字母全部大写,常量全部大写用下划线分隔,变量用驼峰形式.注意使用long赋值用L时不能写小写的L要写大写的,不然会和数字“1”傻傻分不清. 下面是举例: public cl ...