angularJS学习之路(四)---作用域(1)
时间:2022-06-25
本文章向大家介绍angularJS学习之路(四)---作用域(1),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这里提到的“作用域”的概念,是一个在范围上与 DOM 结构一致,数据上相对于某个 $scope 对象的属性的概念。我们还是从 HTML 代码上来入手:
<div ng-controller="BoxCtrl">
<div style="width: 100px; height: 100px; background-color: red;"
ng-click="click()">
</div>
<p>{{ w }} x {{ h }}</p>
<p>W: <input type="text" ng-model="w" /></p>
<p>H: <input type="text" ng-model="h" /></p>
</div>
上面的代码中,我们给一个 div 元素指定了一个 BoxCtrl ,那么, div 元素之内,就是 BoxCtrl 这个函数运行时, $scope 这个注入资源的控制范围
作用域很关键,因为它涉及到表达式的上下文
首先要知道 $scope 的意思或者作用:
$scope 作用是:定义应用业务逻辑、 控制器方法 、视图属性
作用域 : 是动态绑定的 这个是angularjs框架的一个好处 :无论是在客户端进行视图修改还是在依赖发生变化时 视图都会被重新渲染
作用域 :监视数据模型变化 当然指的是在它的范围内
作用域:发送变化时 由apply机制实现通知
作用域:界定范围是由 ng-app 元素确定的,这个被应用的元素和它内部的所有元素 都在这个$scope 范围内
作用域包含作用域 类似 继承 这个概念
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say Hello</a>
</div>
{{person}}
</div>
<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>
var app =angular.module("myApp",[]);
app.controller('ParentController',function($scope){
$scope.person = {greeted:false};
});
app.controller('ChildController',function($scope) {
$scope.sayHello = function(){
$scope.person.name = "hello world";
};
});
</script>
</body>
</html>
默认情况下 angularjs 在当前作用域中 无法找到这个属性的时候,便会在父级作用域中进行查找 一级一级的往上找,直到找到为止,
如果没有找到 视图不会发生更新
遵守 原型继承的机制 子类可以调用父类的属性和方法
上面代码的结果是这样的:
Say Hello
{"greeted":false}
然后你点击Say Hello 视图更新:
Say Hello
{"greeted":false,"name":"hello world"}
- 模拟退火算法从原理到实战【基础篇】
- python接口自动化3-自动发帖(session)
- 平面上给定n条线段,找出一个点,使这个点到这n条线段的距离和最小。
- python接口自动化4-绕过验证码登录(cookie)
- 洛谷P1313 计算系数【快速幂+dp】
- python接口自动化5-Json数据处理
- Numpy教程第1部分 - 阵列简介(常用基础操作总结)
- Session和Cookies的基本原理
- 浅析Numpy.genfromtxt及File I/O讲解
- 损失函数详解
- 排查Java的内存问题
- 使用两种方法让 ASP.NET Core 实现遵循 HATEOAS 结构的 RESTful API
- 设计模式六大原则(5):迪米特法则
- Selenium2+python自动化61-Chrome浏览器(chromedriver)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 高频原题——LeetCode题目8:字符串转换整数 (atoi)
- 不转字符串判断——LeetCode题目9:回文数
- 关于双指针的简单理解
- 面试题噩梦之一——LeetCode题目10:正则表达式匹配
- 什么时候触发GC
- 找找数学上的规律——LeetCode题目11:盛最多水的容器
- Java学习笔记, 不断更新
- 这题真是送分——LeetCode题目12:整数转罗马数字
- 该了解一波了!零基础入门Nginx
- 轻松一刻——LeetCode题目13:罗马数字转整数
- 动动手——LeetCode题目14:最长公共前缀
- LeetCode题目15:三数之和
- 三数之和姊妹题——LeetCode题目16:最接近的三数之和
- 组合问题——LeetCode题目17:电话号码的字母组合
- Python读取PDF文档并翻译