<!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. centos 6.5网卡dhcp不能获得网关

    环境:vmware +centos6.5 添加两个虚拟网卡.一个自动获取ip(用于上网-桥接) 一个手动(与主机通信用于ssh-NAT).  因为自已手动改了一下ifcfg-eth0里面的HWADDR ...

  2. JS滚动条下拉事件

    <script type="text/javascript"> window.onscroll = function(){ var t = document.docum ...

  3. WINDOW下php开启pgsql拓展

    操作步骤: 1.修改php.ini,去掉“extension=php_pgsql.dll ”和“extension=php_pdo_pgsql.dll ”前的分号.2.确认C:\php\ext\下ph ...

  4. 【原创】CLEVO P157SM外接鼠标键盘失灵解决：更换硅脂（附带最新跑分数据）

    作者批注:本文允许转载,并且希望给搜索未来人类.蓝天.CLEVO.更换硅脂或者任何有关关键字的朋友提供帮助. 原文地址:http://www.cnblogs.com/c4isr/p/3514140.h ...

  5. [LeetCode 111] - 二叉树的最小深度 (Minimum Depth of Binary Tree)

    问题 给出一棵二叉树,找出它的最小深度. 最小深度是指从根节点沿着最短路径下降到最近的叶子节点所经过的节点数. 初始思路 不难看出又是一个需要层次遍历二叉树的题目,只要在112基础上作出简单修改即可得 ...

  6. vbox端口转发

    端口转发:setting->network->adapter:attached to NAT.port forwarding rules->name    protocol     ...

  7. SDL2.0 学习笔记-1 windows下的第一个测试程序

    SDL全称是Simple DirectMedia Layer,是一个开源的.跨平台(win32,linux,mac)的多媒体开发c语言库. 官方网站 http://www.libsdl.org/ 第一 ...

  8. 生成excel内存溢出问题的解决方式

    常用的excel生成工具包括jxl.poi.但二者都存在一个问题:生成excel需要大量的消耗内存.如果一次性往excel中写入的数据足够的多将导致内存溢出. 1.数据写入excel为什么会大量的消耗 ...

  9. Android视频录制

    public class MainActivity extends Activity { private MediaRecorder videoRecorder=null; private Butto ...

  10. DPDK2.1 linux上开发入门手册

    1引言 本文档主要包含INTEL DPDK安装和配置说明.目的是让用户快速的开发和运行程序.文档描述了如何在不深入细节的情况下在linux应用开发环境上编译和运行一个DPDK应用程序. 1.1文档总览 ...