<!DOCTYPE html>

<html lang="zh-CN" ng-app="app">

<head>

    <meta charset="utf-8">

    <title>在指令中使用子作用域</title>

    <link rel="stylesheet" href="../bootstrap.min.css">

</head>

<body>

    <h4>JavaScript对象要么是值复制要么是引用复制。字符串、数字和布尔型变量是值 复制。数组、对象和函数则是引用复制。下面来看看这两个的区别</h4>

    1.值复制

    <div ng-controller="SomeController">

        初始值：<input type="text" ng-model="someBareValue"><br>

        {{ someBareValue }}

        <button ng-click="someAction()">父作用域</button>

        <div ng-controller="ChildController">

            {{ someBareValue }}

            <button ng-click="childAction()">子作用域</button>

        </div>

    </div>

    1.引用复制

    <div ng-controller="SController">

        {{ someModel.someValue }}

        <button ng-click="someAction()">父作用域</button>

        <div ng-controller="CController">

            {{ someModel.someValue }}

            <button ng-click="childAction()">子作用域</button>

        </div>

    </div> 

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

    <script>

        angular.module('app', [])

        // 值复制

        .controller('SomeController', function($scope) {

             $scope.someBareValue = '';  // 不赞成这样声明数据 应该以数据模型的方式声明一个对象 参见 引用复制

             $scope.someAction = function() {

                 $scope.someBareValue = 'hello human, from parent';

             };

        })

        .controller('ChildController', function($scope) {

            $scope.childAction = function() {

                $scope.someBareValue = 'hello human, from child';

            };

        })

        // 引用复制

        .controller('SController', function($scope) {

             $scope.someModel = {

                 someValue: 'hello computer'

             };

             $scope.someAction = function() {

                 $scope.someModel.someValue = 'hello human, from parent';

             };

        })

        .controller('CController', function($scope) {

            $scope.childAction = function() {

                $scope.someModel.someValue = 'hello human, from child';

            };

        }); 

    </script>

</body>

</html>

某些指令指的是：

ng-include

ng-switch

ng-repeat

ng-view

ng-controller

ng-if

避免指令从外部作用域继承并创建一个新的子作用域的方式 使用ng-include为例：

<div ng-include="/test.html" ng-controller="ctrl">
　　hello {{name}}
</div>

这里的ng-controller非常重要 等同于你手动指定了某个特定的作用域

这样ng-include指令就不会像往常一样从外部作用域继承并创建一个新的子作用域

这段代码在这里只是做个例子，不具备任何意义

这里我着重说下值复制，引用复制没啥可说的

　　/*

            关于值复制：

            ChildController属于SomeController的子作用域 那么理所应当 在子作用域中的$scope.someBareValue没有初始值的时候，

            他会复制父作用域中$scope.someBareValue的值作为自己的值，当父作用域中的$scope.someBareValue的值改变时也会造成子作用域

            中的$scope.someBareValue的值改变，但是当子作用域中的$scope.someBareValue有初始值的时候，父作用域和子作用域中的$scope.someBareValue

            就成了两个完全不一样的东西了

            通俗点讲就是：当你兜里没钱的时候，你爸爸兜里的钱就是你的钱，你爸爸有钱你就有钱，你爸爸没钱你就没钱。

            但是当你组建了家庭能够自己挣钱的时候，你爸爸就留着他自己的钱养老了，不会再给你了，而你的钱从始至终都属于你自己！

            这里只是做个例子，不具备任何意义

　　*/
 

angularjs某些指令在外部作用域继承并创建新的子作用域引申出的“值复制”与“引用复制”的问题的更多相关文章

  1. Android 自定义控件之继承ViewGroup创建新容器

    欢迎大家来学习本节内容,前几节我们已经学习了其他几种自定义控件,分别是Andriod 自定义控件之音频条及 Andriod 自定义控件之创建可以复用的组合控件还没有学习的同学请先去学习下,因为本节将使 ...

  2. AngularJs -- 指令中使用子作用域

    下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...

  3. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

  4. AngularJS directive 指令相关记录

    .... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...

  5. AngularJS创建新指令 - 函数功能

    首先先介绍下AngularJS指令下的几种函数 Link函数和Scope 指令生成出的模板其实没有太多意义,除非它在特定的scope下编译.默认情况下,指令并不会创建新的子scope.更多的,它使用父 ...

  6. angularjs自定义指令

    my-directive为指令名称,thisdata为绑定的数据 <span ng-repeat="act in move.casts" style="positi ...

  7. AngularJS之指令

    紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界 ...

  8. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  9. AngularJs:Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

随机推荐

  1. 学习开发jquery插件

    先学习http://www.cnblogs.com/playerlife/archive/2012/05/11/2495269.html http://www.cnblogs.com/fromeart ...

  2. image控件读取数据库二进制图片

    DataGridShowImage.aspx   <%@ Page language="c#" debug="true" Codebehind=" ...

  3. 信息安全实验二：return-to-libc

    title: return-to-libc date: 2016-01-11 17:40:30 categories: information-security tags: return-to-lib ...

  4. 怎样卸载goldengate

    1. Log on to the database server (as oracle) where the GoldenGate software isinstalled.2. Change dir ...

  5. HttpClient and FileUpload

    All communication over the Internet happens using a standard set of protocols, such as File Transfer ...

  6. hdu 4535 吉哥系列故事——礼尚往来

    http://acm.hdu.edu.cn/showproblem.php?pid=4535 错排公式:a[i]=(i-1)*(a[i-2]+a[i-1]): #include <cstdio& ...

  7. QQ音乐的请求

    CEF 3.2357.1291.g47e6d4bChromium 43.0.2357.134OS WindowsWebKit 537.36JavaScript 4.3.61.38Flash User ...

  8. 【HDOJ】1403 Longest Common Substring

    后缀数组2倍增可解. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXM 28 ...

  9. HDU_1238——最大子串搜索

    Problem Description You are given a number of case-sensitive strings of alphabetic characters, find ...

  10. java socket报文通信（一） socket的建立

    TCP是Transfer Control Protocol的 简称,是一种面向连接的保证可靠传输的协议.通过TCP协议传输,得到的是一个顺序的无差错的数据流.发送方和接收方的成对的两个socket之间 ...