[AngularJS] Javascript scope and AngularJS $scope

Scope resolution of our Angular documents works exactly the same way scope resolution works in plain, old Javascript. The only difference here is that what actually matters about scope inheritance is the structure of our dom.

If the child controller doesn‘t have, will find in $rootScope.

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>RootScope</h1>
{{posts | json}}
<div ng-controller="FirstController">
    <h1>FirstController</h1>
    {{posts | json}}
</div>

<div ng-controller="SecondController">
    <h1>SecondController</h1>
    {{posts |  json}}
</div>
<div ng-controller="FirstController">
    <h1>Second as innercontroller (first contains second)</h1>
    <div ng-controller="SecondController">
        {{posts |  json}}
    </div>
</div>

<div ng-controller="SecondController">
    <h1>First as innercontroller (second contains first)</h1>
    <div ng-controller="FirstController">
        {{posts |  json}}
    </div>
</div>

<div ng-controller="FirstController">
    <div ng-controller="SecondController">
        <h1>First & Second don‘t have</h1>
        {{youdonthave}}
    </div>
</div>

<script src="bower_components/angular/angular.min.js"></script>
<script src="./app.js"></script>
</body>
</html>
/**
 * Created by Answer1215 on 1/2/2015.
 */
angular.module(‘app‘, [])
    .run(function($rootScope) {
        $rootScope.posts = [7,8,9];
        $rootScope.youdonthave = "All child don‘t have";
    })
    .controller(‘FirstController‘, function($scope) {
        $scope.posts = [1,2,3];
    })
    .controller(‘SecondController‘, function($scope) {
        $scope.posts = [4,5,6];
    })

时间: 2024-10-26 12:22:07

[AngularJS] Javascript scope and AngularJS $scope的相关文章

Scope in AngularJS

From the RUNBOOM.COM, it said: Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. While, how many scopes can we have? is there any structure in it? I got those question when I come to it. After a tough time r

(十一)通过angularjs的ng-repeat指令看scope的继承关系

ng-repeat指令的使用方式可以参考如下代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-repeat</title> <script src="jquery-1.11.1.js"></script> <script src="a

AngularJS 全局scope与Isolate scope通信

在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透视,这里对全局scope 和 directive本地scope的使用做一个总结. 一.scope作用域 1.AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独立的"Isolate"作用域,它也

avaScript文件中调用AngularJS内部方法或改变$scope变量

需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controller来获取app var appElement = document.querySelector('[ng-controller=mainController]'); 然后在获取$scope变量: var $scope = angular.element(appElement).scope(); 如

AngularJS 全局scope与指令 scope通信

在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地scope的使用做一个总结. 一.scope作用域 1.AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独立的"Isolate"作用域,它也

JavaScript的作用域(Scope)和上下文(Context)

JavaScript对于作用域(Scope)和上下文(Context)的实现是这门语言的一个非常独到的地方,部分归功于其独特的灵活性. 函数可以接收不同的的上下文和作用域.这些概念为JavaScript中的很多强大的设计模式提供了坚实的基础. 然而这也概念也非常容易给开发人员带来困惑.为此,本文将全面的剖析这些概念,并阐述不同的设计模式是如何利用它们的. 作用域(Scope)和上下文(Context) 首先需要知道的是,上下文和作用域是两个完全不同的概念.多年来,我发现很多开发者会混淆这两个概念

JavaScript的Function Scope and Lexical Scope

原贴地址:http://pierrespring.com/2010/05/11/function-scope-and-lexical-scoping/ 个人觉得写得不错,简单地搬运,如有错误,请指正. Wikipedia defines Scope as follows: Tipically, scope is used to define the extent of information hiding--that is, the visibility or accessibility of

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& .= .@. 首先是

AngularJS学习笔记之directive&mdash;scope选项与绑定策略

From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时

秒味课堂Angular js笔记------$scope.$watch和$scope.$apply

$scope.$watch(watchFn , watchAction , deepWatch) 其中,watchFn是带有angular表达式或函数字符串: watchAction是一个函数或者表达式,当watchFn发生变化时调用,如果是函数,其签名是function(newValue, oldValue, scope): deepWatch如果是ture,则会检查被监控对象的每一个属性是否发生了变化. <script type="application/javascript"