学习整理:1.angular.module()只有一个参数时表示引用那个模块,通常是有两个参数,一是模块名,二是依赖项
2.过滤器的两种写法:
一:$scope.name = $filter('lowercase')('Ari'); 表示转化为小写
二:{{ name | uppercase }} 表示转化为大写
3.表单属性
①$pristine 未修改表单,未修改时为true
②$dirty 修改过表单,只要修改过则为true
③$valid 合法表单,合法时为true
④$invalid 不合法表单,不合法时为true
⑤$error 判断表单是否合法,不合法则为true,且这个属性可以访问到其他全部属性合法信息
⑥$submitted 判断是否点击提交按钮
⑦$isEmpty 判断是否为空
3.指令(一般用A,属性方式写法)
①指令名应用驼峰命名
②函数应该返回一个对象{}
③使用replace可以把自定义标签名去掉
4.controller
子可以访问父的变量,简而言之就是,底层可以往上查找变量
5.向指令传递数据
angular.module(‘myapp’,[])
.directive('mydirective', function() {
return {
restrict: 'A',
replace: true,
template: '<a href="http://baidu.com">click me</a>'
}
});
改写:
template: '<a href="{{ myUrl }}">{{ myLinkText }}</a>'
html:
<div my-directive
my-url="http://baidu.com"
my-link-text="click me">
</div>
6.双向数据绑定例子
<!doctype html>
<html ng-app="myApp">
<head>
<script src="./angular/angular.js"></script>
</head>
<body>
<label>Their URL field:</label>
<input type="text" ng-model="theirUrl">
<div my-directive
some-attr="theirUrl"
my-link-text="Click me to go to Google"></div>
<script>
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope: {
myUrl: '=someAttr',
myLinkText: '@'
},
template: '\
<div>\
<label>My Url Field:</label>\
<input type="text" ng-model="myUrl" />\
<a href="{{myUrl}}">{{myLinkText}}</a>\
</div>\
'
}
})
</script>
</body>
</html>
7.属性指令:
类布尔属性:
ng-href 使用动态URL时,也要配合ng-href使用
ng-src 同上
ng-disabled
ng-checked
ng-readonly
ng-selected与ng-options一起使用
ng-class
ng-style
布尔属性:
ng-disabled
ng-readonly
ng-checked
ng-selected
8.当变量是字符串、数字、布尔型变量时,子控制器是复制父控制器的变量值,不是引用。相反,当为数组、对象、函数的向上引用时,为引用复制,此时相关联。
9.补充指令:
ng-app
ng-init 设置初始状态
ng-controller
ng-include
ng-switch
ng-view
ng-if 真正意义上的移除,恢复时会以初始状态显示(ng-show是隐藏)
10.ng-repeat作用域拥有的特殊属性:
$index 下标0到length-1
$first 第一个元素时为true
$middle 处于中间时为true
$last 最后时为true
$even index为偶数时为true
$odd index为奇数时为true
11.ng-bind与{{}}类似,ng-bind不会导致未渲染内容闪烁,{{}}与ng-cloak一起使用也能达到效果
12.ng-model建议绑定scope上对象模型内的属性,而不是直接绑定属性
13.directive返回对象中的属性:
restrict: string,
priority: number,
terminal: boolean,
template: string or template function,
templateUrl: string,
replace: boolean or object,
scope: boolean or object, 重要:true时,会从父作用域继承并创建一个新的作用域
transclude: boolean,
controller: string or function,
controllerAs: string,
require: string,
link: function,
compile: function(){ return {} }
14.terminal(布尔型)
作用:限制比此指令优先级低的指令的执行
15.指令内scope为{}时,不能访问外部变量