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

本文介绍了AngularJS中的模块化编程,强调了Module.controller()创建控制器的方法,并详细阐述了控制器的三大职责,如初始化$scope对象、数据模型的双向与单向绑定。$scope作为视图和控制器间的桥梁,用于数据传递。同时,文章讨论了单向和双向数据绑定的使用场景和区别。

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暴露数据模型(数据,行为)

单向绑定和双向绑定
单向绑定:

  • 模型变化过后,自动同步到界面上;
  • 一般纯展示型的数据会用到单项数据绑定;
  • 使用表达式的方式都是单向的
    双向绑定:
  • 两个方向的数据自动同步:
  • 模型发生变化自动同步到视图上;
  • 视图上的数据发生变化过后自动同步到模型上;
### 创建具有单向数据绑定的自定义指令 在 AngularJS 中,创建带有单向数据绑定的自定义指令涉及几个关键步骤。为了实现这一点,可以利用 `scope` 属性来配置属性绑定方式。 当构建自定义指令时,通过设置 scope 对象内的参数为 '@' 或者 '<' 来指定单向数据流: - 使用 `'@'` 绑定字符串表达式到父作用域。 - 使用 `'<'` 实现组件间的单向数据传递(仅限于现代版本支持)。 对于 AngularJS (1.x),通常采用 `'@'` 进行简单的字符串插值[^1]。 下面是一个具体的例子展示如何创建一个只读输入框作为自定义指令,并且该指令接收来自其父级的作用域变量而不允许反向修改它: ```javascript // 定义模块控制器 var app = angular.module('myApp', []); app.controller('MainCtrl', function($scope) { $scope.message = "This message will be passed down."; }); // 注册自定义指令 app.directive('readOnlyInput', function() { return { restrict: 'E', template: `<input type="text" ng-value="value" readonly>`, scope: { value: '@bindValue' } }; }); ``` 在这个案例里,`ng-value` 被用来显示文本框的内容而不会触发双向绑定机制;同时,在子指令内部声明了一个隔离作用域并指定了 `bindValue` 参数使用字符间插值的方式(`@`)来进行单向的数据流动。 #### HTML 部分 ```html <div ng-app="myApp" ng-controller="MainCtrl"> <!-- 使用自定义指令 --> <read-only-input bind-value="{{message}}"></read-only-input> </div> ``` 上述代码片段展示了如何在一个名为 `readOnlyInput` 的新元素上应用此自定义指令,并将其与父级 `$scope` 上的消息关联起来。由于采用了单向绑定模式 (`@`) ,因此即使用户尝试编辑这个不可编辑字段也不会影响原始模型状态。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值