一、DI-控制器参数
$scope
- 在js和html之间传递数据
- 仅在控制器作用域内有效
$element
- 是一个jQuery对象
- 作用域控制器所在的html元素
- 在js中，通过$element获取DOM对象
- var e = $element.children().eq(0);
- $scope.w = e.width();
- $scope.h = e.height();
$http
- http协议请求
- $http.get(url).success(function(result){});
二、DI-监听
$watch
- 监听变化
- 语法
- $scope.$watch('w',function(to,from){
e.width(to);
});
- $scope.$watch('h',from){
e.height(to);
});
三、指令-模板包含
ng-include
- 直接引用外部文件
- <div ng-include src="tpl.html"></div>
- <div ng-include="tpl.html"></div>
- 配合变量引入文件
<section data-ng-app="" data-ng-init="url='contact.html'">
<div data-ng-include="url"></div>
</section>
四、指令-节点控制
ng-style
- 直接指定样式
<div ng-style="{width:100 + 'px',height:100 + 'px',backgroundColor:'red'}"></div>
- 通过控制器定义样式变量
<script>
function myCtrl($scope,$element){
$scope.style = {width:100 + 'px',backgroundColor:'blue'};
}
</script>
ng-class
- 直接指定类
<div ng-controller="TestCtrl" ng-class="'cls'"></div>
- ng-class-even 和 ng-class-odd
<ul ng-init="l=[1,2,3,4]">
<li ng-clas-odd="'odd'" ng-class-even="'even'" ng-repeat="m in l">{{ m }}</li>
</ul>
显示和隐藏
其他属性
五、事件绑定
文本变化
鼠标点击
鼠标移动
总结：本章内容主要介绍了AngularJS DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定