您的位置:首页 > Web前端 > AngularJS

(三)Angular控制器,Module.controller() 控制器,单向绑定和双向绑定

2016-09-05 09:28 525 查看
AngularJS很重要的一个特性就是实现模块化编程,我们可以通过以下方式创建一个模块,对页面进行功能业务上的划分

// 创建一个名字叫MyApp的模块,第二个参数指的是该模块依赖那些模块
var app = angular.module(“MyApp”, []);//app是MyApp模块的实例


也可以将重复使用的指令或过滤器之类的做成模块便于复用

注意必须指定第二个参数,[]是个空数组,表示不需要其他模块。

Module.controller() 控制器

var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例
app.controller(“userCtrl” ,function($scope){
//userCtrl是控制器的名字
$scope.name= “赵敏”; //$scope用来保存数据,定义方法
});


第二行代码创建了一个名为userCtrl的控制器,以及一个控制器函数

控制器函数接受一个名为$scope的参数

Controller 控制器

控制器的三种主要职责:

为应用中的模型设置初始状态,初始化$scope对象

通过$scope对象把数据模型或函数行为暴露给视图

使用$watch方法监视模型的变化,做出相应的动作

// 监视购物车内容变化,计算最新结果
$scope.$watch(‘totalCart’, calculateDiscount);


$scope(上下文模型)

视图和控制器之间的桥梁

用于在视图和控制器之间传递数据

利用$scope暴露数据模型(数据,行为)

单向绑定和双向绑定

单向绑定:

模型变化过后,自动同步到界面上;

一般纯展示型的数据会用到单项数据绑定;

使用表达式的方式都是单向的

双向绑定:

两个方向的数据自动同步:

模型发生变化自动同步到视图上;

视图上的数据发生变化过后自动同步到模型上;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息