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>
时间: 2024-10-18 02:42:22

AngularJS学习篇(五)的相关文章

AngularJS学习篇(三)

创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, myAngular, 但在使用它时需要以 - 分割, my-angular: 你可以通过以下方式来调用指令: 元素名 属性 类名 注释 元素名 <!DOCTYPE html> <html> <head> <meta charset=&q

AngularJS学习篇(八)

AngularJS 服务(Service) 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 为什么使用服务? 在很多服务中,比如 $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象 因为这些服务可以获取到Angular应用声明周期的每一个阶段,并且和$watch整合,让Angular可以监控应用,处理事件变化.普通的DOM对象则不能在Angular应用声明

AngularJS学习篇(十)

AngularJS Select(选择框) 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></scr

AngularJS学习篇(四)

AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.j

AngularJS学习篇(二十四)

AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-contr

AngularJS学习篇(十七)

AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <body> <h2>Validation Example</h2> <form ng-app="myApp" ng-controller

AngularJS学习篇(十八)

AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访问. 以下列出了一些通用的 API 函数: API 描述 angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串,如果是返回 true. angular.isNumber()

AngularJS学习篇(二十三)

AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://

AngularJS学习篇(二十)

AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: <body ng-app=""> <div ng-include="'test.htm'"></div> </body> test.htm 文件代码: <h1>菜鸟教程</h1> <p>这是一个