AngularJS学习篇(五)
AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象,有可用的方法和属性。
Scope 可应用在视图和控制器上
当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递
视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular-1.6.3/angular.js"></script>
</head>
<body>
<div ng-app="myDirective" ng-controller="myController">
名字:<input ng-model="name">
<h1>你输入的名字:{{name}}</h1>
<p>{{lastName}}</p>
</div>
<script>
var app=angular.module("myDirective",[]);
app.controller("myController", function($scope,$rootScope) {//注意参数名称
$scope.name="chenyunfei";
$rootScope.lastName="fei";
});
</script>
</body>
</html>
AngularJS学习篇(五)的更多相关文章
- angularjs学习第五天笔记(第二篇:表单验证升级篇)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- AngularJS学习篇(十五)
AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...
- AngularJS学习篇(二十四)
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇(二十三)
AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...
- AngularJS学习篇(二十二)
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇(二十一)
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...
- AngularJS学习篇(二十)
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇(十九)
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
- AngularJS学习篇(十八)
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...
随机推荐
- Angular4 后台管理系统搭建(9) - 用自定义angular指令,实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- php字符的替换,截取,指定查找
<?php/** * Created by 郭鹏. * User: msi * Date: 2017/9/27 * Time: 14:17 *///随机数生成器echo rand();echo ...
- tomcat部署项目的一点心得
打包方式 eclipse 右键项目Export 选择WAR file 在选择将打包好的war 包存放的位置 放到tomcat中运行 : 首先将war包fang放到解压的tomcat中的weba ...
- 认识:ThinkPHP的编译缓存文件~runtime.php
1.定义单入口文件(index.php) 在单入口index.php中不定义这两项时,会生成编译缓存文件~runtime.php define('RUNTIME_PATH','./App/Temp/' ...
- Vi快捷操作 vim配置【shell文件格式从windows转换为linux】
vim配置 http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html gg 首行 dd 删除当前行 :.,$d 删除全部内容 :se ...
- C#最基本的小说爬虫
新手学习C#,自己折腾弄了个简单的小说爬虫,实现了把小说内容爬下来写入txt,还只能爬指定网站. 第一次搞爬虫,涉及到了网络协议,正则表达式,弄得手忙脚乱跑起来效率还差劲,慢慢改吧. 爬的目标:htt ...
- Nginx平滑升级源码分析
一.平滑升级步骤 1.重命名之前的sbin/nginx文件,将新的nginx文件放到sbin/目录下 #mv ./sbin/nginx ./sbin/nginx.old #cp ~/nginx ./s ...
- Working with Python subprocess - Shells, Processes, Streams, Pipes, Redirects
Posted: 2009-04-28 15:20 Tags: Python Note Much of the "What Happens When you Execute a Command ...
- Layer弹层组件 二次扩展,项目中直接使用。
/************************ Layer扩展 ****************************/ /* * Layer弹出Alert提示框 * @param messag ...
- 扩展jquery.validate自定义验证,自定义提示,本地化
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...