angular学习笔记（四）

最新推荐文章于 2023-05-04 17:25:15 发布

节艹鸣泣之时

最新推荐文章于 2023-05-04 17:25:15 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

分类专栏： angular学习笔记

本文链接：https://blog.youkuaiyun.com/qq_36414265/article/details/80696615

angular学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍AngularJS中的关键概念，包括模块、过滤器、表单属性、指令、控制器、数据绑定等，并提供实例说明如何使用这些特性来构建动态网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习整理：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为{}时，不能访问外部变量