AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点

一、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(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!