(三)Angular控制器,Module.controller() 控制器,单向绑定和双向绑定
2016-09-05 09:28
525 查看
AngularJS很重要的一个特性就是实现模块化编程,我们可以通过以下方式创建一个模块,对页面进行功能业务上的划分
也可以将重复使用的指令或过滤器之类的做成模块便于复用
注意必须指定第二个参数,[]是个空数组,表示不需要其他模块。
Module.controller() 控制器
第二行代码创建了一个名为userCtrl的控制器,以及一个控制器函数
控制器函数接受一个名为$scope的参数
Controller 控制器
控制器的三种主要职责:
为应用中的模型设置初始状态,初始化$scope对象
通过$scope对象把数据模型或函数行为暴露给视图
使用$watch方法监视模型的变化,做出相应的动作
$scope(上下文模型)
视图和控制器之间的桥梁
用于在视图和控制器之间传递数据
利用$scope暴露数据模型(数据,行为)
单向绑定和双向绑定
单向绑定:
模型变化过后,自动同步到界面上;
一般纯展示型的数据会用到单项数据绑定;
使用表达式的方式都是单向的
双向绑定:
两个方向的数据自动同步:
模型发生变化自动同步到视图上;
视图上的数据发生变化过后自动同步到模型上;
// 创建一个名字叫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暴露数据模型(数据,行为)
单向绑定和双向绑定
单向绑定:
模型变化过后,自动同步到界面上;
一般纯展示型的数据会用到单项数据绑定;
使用表达式的方式都是单向的
双向绑定:
两个方向的数据自动同步:
模型发生变化自动同步到视图上;
视图上的数据发生变化过后自动同步到模型上;
相关文章推荐
- Angular入门02- Module模块、Controller控制器
- angular双向绑定与单向绑定的写法区别
- 一、angular:module-Controller-Model-View (模块-控制器-模型-视图);异步请求$http
- Angular自动双向绑定值
- 数据之一次绑定, 单向绑定, 双向绑定, INotifyPropertyChanged, 数据转换, 数据验证
- Angular(五)_控制器ng-controller
- 浅谈angular.js中实现双向绑定的方法$watch $digest $apply
- angular 双向数据绑定 初始化页面hide后,就绑定失效了
- Angular双向数据绑定MVVM以及基本模式分析
- Angular2中自定义组件实现双向绑定
- Vue && Angular 双向绑定检测不到对象属性的添加和删除
- spring mvc Controller 控制器 url 在html绑定
- Vue.js单向绑定和双向绑定实例分析
- 解决angular双向绑定无效果,ng-model不能正常显示的问题
- Angular 解除双向绑定(适用Angular2+)
- angular 双向绑定的实现原理
- 使用angular实现双向数据绑定
- 一个Angular的双向数据绑定的例子
- 单向绑定和双向绑定的区别
- 关于单向数据绑定和双向数据绑定