1、AngularJS Scope(作用域)
　　Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
　　Scope 是一个对象，有可用的方法和属性。
　　Scope 可应用在视图和控制器上。
2、如何使用 Scope
　　当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
　　eg：

app.controller('myCtrl', function($scope) {

$scope.carname = "Volvo";

});

　　当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
　　视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

3、Scope 概述
　　AngularJS 应用组成如下：
　　View(视图), 即 HTML。
　　Model(模型), 当前视图中可用的数据。
　　Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
　　scope 是模型。
　　scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
4、Scope 作用范围
　　HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
5、根作用域
　　所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
　　$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="js/angular.min.js"></script>

</head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <!-- Scope 概述 -->

        <input ng-model="name">

        <h1>{{greeting}}</h1>

        <button ng-click='sayHello()'>点我</button>

        <p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>

        <!-- Scope 作用范围 -->

        <ul>

            <li ng-repeat="x in names">{{x}}</li>

        </ul>

        <!-- 根作用域 -->

        <ul>

            <li ng-repeat="x in names">{{x}}-{{lastname}}</li>

        </ul>

        <p>注意 $rootScope 在循环对象内外都可以访问。</p>

    </div>

</body>

</html>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function ($scope,$rootScope) {

        //Scope 概述

        $scope.name = "Runoob";

        $scope.sayHello = function() {

            $scope.greeting = 'Hello ' + $scope.name + '!';

        };

        //Scope 作用范围

        $scope.names = ["Emil", "Tobias", "Linus"];

        //根作用域

        $rootScope.lastname = "Refsnes";

    });

</script>

AngularJS学习之旅—AngularJS Scope作用域(五)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  3. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  4. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  5. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  6. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  7. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  8. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  9. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

随机推荐

  1. windows下golang实现Kfaka消息发送及kafka环境搭建

    kafka环境搭建: 一.安装配置java-jdk (1)kafka需要java环境,安装java-jdk,下载地址:https://www.oracle.com/technetwork/java/j ...

  2. markdown反射型xss漏洞复现

    markdown xss漏洞复现 转载至橘子师傅:https://blog.orange.tw/2019/03/a-wormable-xss-on-hackmd.html 漏洞成因 最初是看到Hack ...

  3. SpringMVC接收json数组对象

    最近帮一个妹子解决一个需求,就是前台使用ajax传三个相同的对象,再加一个form表单对象.然后遇到各种问题,终于解决了,@RequestBody接收Json对象字符串 ​以前,一直以为在Spring ...

  4. MySQL忘记密码后找回密码

    停止mysql服务 在mysql配置文件里[mysqld]下添加skip-grant-tables 3.重启服务,进入mysql 4.修改密码: MariaDB [mysql]> update ...

  5. solr之环境配置一

    安装Java JDK solr运行需要java serverlet 容器,默认使用jetty,或者tomcat,jboss等等. 下载一个jdk,我的jdk是jdk1.7.0_65. 安装JDK的步骤 ...

  6. mybatis中的动态SQL

    在实际开发中,数据库的查询很难一蹴而就,我们往往要根据各种不同的场景拼接出不同的SQL语句,这无疑是一项复杂的工作,我们在使用mybatis时,mybatis给我们提供了动态SQL,可以让我们根据具体 ...

  7. Educational Codeforces Round 48 (Rated for Div. 2)——A. Death Note ##

    A. Death Note time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  8. VSCode入门----设置成中文

    将VScode设置成中文. 1.如下图,安装中文插件,点击左边后,输入chinese搜索,然后选择中文件简体进行安装. 2.按住Ctrl+Shift+P,然后输入 configure ,如下图,选择“ ...

  9. JDK源码分析（9）之 WeakHashMap 相关

    平时我们使用最多的数据结构肯定是 HashMap,但是在使用的时候我们必须知道每个键值对的生命周期,并且手动清除它:但是如果我们不是很清楚它的生命周期,这时候就比较麻烦:通常有这样几种处理方式: 由一 ...

  10. JDK源码分析（1）之 String 相关

    ​在此之前有无数次下定决心要把JDK的源码大致看一遍,但是每次还没点开就已被一个超链接或者其他事情吸引直接跳开了.直到最近突然意识到,因为对源码的了解不深导致踩了许多莫名其妙的坑,所以再次下定决心要把 ...