AngularJS 笔记系列(四)控制器和表达式
控制器:在 Angular 中控制器是一个函数,用来向作用域中添加额外的功能。我们用它来给作用域对象设置初始状态,并添加自定义行为。
使用方法: var app = angualr.module('app',[]);
app.controller('testController',function($scope){
// do sth here
})
控制器的嵌套:在整个应用中都会有父级作用域存在,除了孤立作用域以外,所有作用域都通过原型继承而来。他们都可以访问父级作用域。
默认情况下,当 AngularJS 在当前作用域无法找到某个属性时,就会向上寻找,一直追溯到$rootScope,如果最终没有找到,程序会继续运行,但是视图无法更新。
最佳实践:短小精悍,不应在 controller 中过多的操作 DOM 和 数据。复杂的业务逻辑应该放到服务和视图中去。
表达式:在 Angular 中,我们通过{{}}向$scope 上绑定变量的写法本质上就是表达式。当用$watch 进行监听时,Angular 就会对函数或表达式进行运算。
解析表达式:Angular 通过$parse 这个内部服务来解析表达式,$interpolate 服务返回一个函数,用以在特定的上下文中运算表达式。
<div ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>
angular.module('myApp', [])
.controller('MyController', function($scope, $interpolate) {
//
$scope.$watch('emailBody', function(body) { if (body) {
var template = $interpolate(body);
$scope.previewText =
template({to: $scope.to});
}
}; });
AngularJS 笔记系列(四)控制器和表达式的更多相关文章
- Java基础复习笔记系列 四 数组
Java基础复习笔记系列之 数组 1.数组初步介绍? Java中的数组是引用类型,不可以直接分配在栈上.不同于C(在Java中,除了基础数据类型外,所有的类型都是引用类型.) Java中的数组在申明时 ...
- 《ASP.NET Core In Action》读书笔记系列四 创建ASP.NET Core 应用步骤及相应CLI命令
一般情况下,我们都是从一个模板(template)开始创建应用的(模板:提供构建应用程序所需的基本代码).本节使用 Visual Studio 2017 .ASP.NET Core2.0和 Visua ...
- AngularJS 笔记系列(三)模块和作用域
模块: 在 AngularJS 中,将函数代码全部都定义在全局命名空间中绝对不是什么好主意,全局变量污染会使冲突几率变大,调试困难,降低开发效率.上次写计时器的 controller 时,我们把 co ...
- AngularJS笔记---作用域和控制器
什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...
- Python基础笔记系列四:工具的安装与配置
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 一开始是没有打算写工具这篇的,后来发现在某些情况下会遇到一些奇怪的问题,这 ...
- Windows-universal-samples学习笔记系列四:Data
Data Blobs Compression Content indexer Form validation (HTML) IndexedDB Logging Serializing and dese ...
- LeetCode 笔记系列四 Remove Nth Node From End of List
题目:Given a linked list, remove the nth node from the end of list and return its head.For example, Gi ...
- AngularJS 笔记系列(五)过滤器 filter
过滤器是用来格式化给用户展示的数据的. 在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器. 大写:{{ name | uppercase }} 也可以在 JS 中进行调用$filter ...
- Python基础笔记系列一:基本工具与表达式
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 工具基础(Windows系统下)传送门:Python基础笔记系列四:工具的 ...
随机推荐
- 第二百七十七节,MySQL数据库-数据表、以及列的增删改查
MySQL数据库-数据表.以及列的增删改查 1.创建一个表 CREATE(创建) TABLE(表) ENGINE(引擎) ENGINE=INNODB(引擎)还有很多类引擎,这里只是简单的提一下INNO ...
- HttpWatch工具简介及使用技巧(转)
HttpWatch是一个可用于录制HTTP请求信息的工具,由Simtec Limited公司开发,其官网为:Http://www.httpwatch.com,HttpWatch只支持IE和Firefo ...
- 基于WebSocket实现网页版聊天室
WebSocket ,HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,其使用简单,应用场景也广泛,不同开发语言都用种类繁多的实现,仅Java体系中,Tomcat,Jetty,Sp ...
- 电脑端与iPad 端如何共享ChemDraw结构
在日常生活中,我们使用的电脑会有好几种系统,很多的软件不能做好各个系统的兼容.但是ChemDraw软件很好的解决了这个问题,可以应用于Mac.Windows两个电脑客户端以及Chem3D for iP ...
- Shell应用之遍历回收站RecycleBin
C++ Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...
- 在VS中调试javascript脚本
https://blog.csdn.net/u010228798/article/details/78207375
- Linq------错误:EntityType: EntitySet 'Products' is based on type 'Product' that has no keys defined.
解决方法: [Table("bma_products")] public class Product { //加上[Key]即可 [Key] public int pid{get; ...
- UIImage 裁剪图片和等比列缩放图片
本文转载至 http://blog.csdn.net/cuiweijie3/article/details/9514293 转自 http://www.tedz.me/ios/uiimage-crop ...
- Animate a custom Dialog,自定义Dialog动画
Inside res/style.xml <style name="AppTheme" parent="android:Theme.Light" /> ...
- 项目中整合第三方插件与SpringMVC数据格式化关于ip地址
一.Bootstrap 响应式按钮 <div calss="col-sm-2"> <button class="btn btn-default btn- ...