动手验证<<深入理解angularjs中的scope>>

最新推荐文章于 2021-03-12 07:56:37 发布
最新推荐文章于 2021-03-12 07:56:37 发布
阅读量1k 收藏
点赞数
分类专栏： Angularjs 文章标签： angularjs scope
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014788227/article/details/50441954
版权

上面一篇转载的博文介绍了angularjs中的scope,下面验证下．

嵌套controller

子controller访问父controller中的model

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('ParentController', function($scope) {
                $scope.name = "parent";
            });
            app.controller('SonController', function($scope) {
            });
        </script>
    </head>
    <body ng-app="myapp">
       <div ng-controller="ParentController">
           <input type="text" ng-model="name" />
           <span>{{name}}</span>
           <div ng-controller="SonController">
               <input type="text" ng-model="name" />
               <span ng-bind="name"></span>
           </div>
       </div>
    </body>
</html>

可以看到，子controller中并没有name变量，于是便到父controller中寻找，直到$rootScope;

如果此时在子scope输入框中输入值，那么可以看到

子controller中值改变了，但是父controller中没有改变.子controller在自己的scope中新建了一个name于是覆盖隐藏了父controller中的name,跟父controller中的name没有关联.

假如我们初始化一下子controller中的name

var app = angular.module('myapp', []);
            app.controller('ParentController', function($scope) {
                $scope.name = "parent";
            });
            app.controller('SonController', function($scope) {
                $scope.name = "son";
            });

结果是一样的，子controller创建了属于自己scope的name.

如果说我们要求子controller跟父controller关联，产生双向数据绑定，也就是不让子controller创建属于自己的name,可以这么做．

<div ng-controller="ParentController">
           <input type="text" ng-model="name" />
           <span>{{name}}</span>
           <div ng-controller="SonController">
               <input type="text" ng-model="$parent.name" />
               <span ng-bind="$parent.name"></span>
           </div>
       </div>

在变量前加上$parent, 那么子controller不在创建自己的属性．而是与父controller直接访问操作父controller中的name属性了．

接下来我们再来看看如果model类型不是基本数据类型，而是对象(数组在js中也是对象).

<head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('ParentController', function($scope) {
                $scope.person = {name : "parent"};
            });
            app.controller('SonController', function($scope) {
                $scope.person.name = 'son';
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp">
       <div ng-controller="ParentController">
           <input type="text" ng-model="person.name" />
           <span>{{person.name}}</span>
           <div ng-controller="SonController">
               <input type="text" ng-model="person.name" />
               <span ng-bind="person.name"></span>
           </div>
       </div>
    </body>

可以看到，父controller中person对象name属性本来的值是parent,但是子controller赋值为son导致父controller的改变，两者数据绑定.

注意此处子controller直接是$scope.person.name = 'son';子controller中并没有person对象．

下面换种写法

<head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('ParentController', function($scope) {
                $scope.person = {name : "parent"};
            });
            app.controller('SonController', function($scope) {
                $scope.person = {name : 'son'};
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp">
       <div ng-controller="ParentController">
           <input type="text" ng-model="person.name" />
           <span>{{person.name}}</span>
           <div ng-controller="SonController">
               <input type="text" ng-model="person.name" />
               <span ng-bind="person.name"></span>
           </div>
       </div>
    </body>


$scope.person = {name : 'son'};在子controller上定义创建了和父controller一样的对象，可以看到子controller与父controller无关了,任何一方改变不再影响另一方．

如果此时要让两者绑定怎么做，还是一样使用$parent.

上面的一切都是js的原型继承导致的.

下面继续研究angular的scope继承.

ng-repeat

<!-- <!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('myController', function($scope) {
                $scope.$index = 1;
                $scope.change = function() {
                    $scope.$index++;
                }
            });
            app.directive('duplicate', function(){
              return {
                transclude: 'element',
                priority: 1000,
                link: function(scope, elem, attrs, ctrl, transclude) {
                  var times = parseInt(attrs.duplicate);
                  var previous = elem;
                  var childScope;

                  for(var i = 0; i < times; i++) {
                    childScope = scope.$new();
                    childScope.$index = i;

                    transclude(childScope, function(clone){
                        console.log(previous)
                      previous.after(clone);
                      previous = clone;
                    });
                  }
                }
              }
            });   
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp" ng-controller="myController">
        <input type='text' ng-model='$index' duplicate="5" />
        <br/>
        <input type="text" ng-model="$index">
        <button class="btn btn-primary" ng-click="change()">click</button>
    </body>
</html> -->

<!-- <!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('myController', function($scope) {
            });
            app.directive('duplicate', function(){
              return {
                restrict: 'EA',
                transclude: 'element',
                replace: true,
                link: function(scope, elem, attrs, ctrl, transclude) {
                    console.log(elem)
                },
                template:"<span ng-transclude>12</span>"
              }
            });   
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp" ng-controller="myController">
       <div duplicate>123</div>
    </body>
</html> -->

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('MyController', function($scope) {
                $scope.ars = ['1', '2', '3'];
                $scope.change = function(item) {
                    item++;
                    console.log($scope.ars);
                }
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp">
       <div ng-controller="MyController">
           <ul>
               <li ng-repeat="item in ars" ng-click="change(item)">{{item}}</li>
           </ul>
       </div>
    </body>
</html>
ng-repeat创建了新的scope，原型继承自父scope，对于数组元素是基本数据类型，它只是把父scope中的值复制给了item，所以item改变值不会影响到父scope数组中的值，所以双向数据绑定也就无法实现．

依次点击三个item,结果如下

如果想要实现双向绑定那么该怎么做，只需把数组元素改为对象.那么就会将父scope中数组元素(对象)的引用给item，不是拷贝，所以一旦item对象改变，父scope中数组元素也相应改变.

 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('myapp', []);
            app.controller('MyController', function($scope) {
                $scope.ars = [{num: '1'}, {num: '2'}, {num: '3'}];
                $scope.change = function(item) {
                    item.num++;
                    console.log($scope.ars);
                }
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body ng-app="myapp">
       <div ng-controller="MyController">
           <ul>
               <li ng-repeat="item in ars" ng-click="change(item)">{{item.num}}</li>
           </ul>
       </div>
    </body>

点击1，

可以看到数组中对象属性改变并反映在了视图中.

点击第2个




timelessmemoryli
关注
专栏目录
166Vue-scope.row+正则验证
Gy_9543的博客
08-12 584
<template> <div> <!-- 面包屑导航区域 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-brea
angular之scope详解
小红帽的博客
05-04 723
AngularJS的一些指令会创建子作用域，而子作用域会继承自父作用域，大致可分为以下3种 1、创建子作用域并继承父作用域的指令 ng-repeatng-includeng-switchng-controllerdirective(scope:true)directive(transclude:true) 2、创建子作用域但不继承父作用域 directive(scope:{
Angular JS　指令 & $scope 2 <连载>　新手必看
Olivia_Yu_的博客
04-27 947
吃晚加餐饭继续来给各位博友更新Angular　JS＜连载＞ Angular JS 2操作步骤 1. 首先需要先导入angular js 库 2.  引导Ag应用的入口程序有两种： 　a. ng-app指令：店家推荐，项目中常用的方式 　b.bootstrap手工引导 ng-app是angular　JS应用程序运行入口,angular　JS程序运行时需首先找到ng-app
angular中的$scope类
H5BOYs的博客
10-19 3470
一，$scope的作用； 1，用来完成在view和controller之间的数据传递，$scope是实现angular中MVVM双向数据同步的关键； 2，所有页面上的属性和方法都放在$scope上进行声明； 3，$scope上面的属性和方法，angular会给该属性或方法添加一个监视器，在当前控制器中创建一个$watchList[ ]; wacth对象会对当前的数据中的变量旧值和新值进行比
php中angular,在angular中运行PHP
weixin_29698317的博客
03-12 284
小编典典AngularJS完全是客户端。您可以将PHP放入HTML模板中，但是如果您未将网络服务器配置为将HTML文件解析为PHP，那么您的PHP甚至都不会被解析。即使这样做，AngularJS也会缓存这些模板，因此它将仅在服务器上“运行”一次。这意味着，如果交换出所涉及的模板，然后在该模板所使用的服务器上更改数据，然后又将其交换回去，则对数据的更新将不会反映在模板中，因为绝对为零这些更新发生在A...
深入理解AngularJs－scope的脏检查（一）
10-19
深入理解AngularJS中的脏检查是理解其数据绑定机制的关键。脏检查（Dirty Checking）是AngularJS用来检测模型变化的一种机制，主要用于更新视图。AngularJS的脏检查是通过`$digest`循环来实现的，这个循环会遍历并...
深入探究AngularJS框架中Scope对象的超级教程
10-23
Scope对象在AngularJS中扮演着核心角色，它作为数据模型的载体，连接了视图和控制器。本文档旨在深入讲解AngularJS中Scope对象的用法，特别是它与根作用域（rootscope）的区别，以及在使用嵌套控制器时会遇到的一些...
深入理解AngularJS中的ng-bind-html指令和$sce服务
10-21
在AngularJS中，数据绑定是其核心特性之一，使得开发者能够轻松地在视图和模型之间同步数据...通过学习本文，希望你对AngularJS中的HTML绑定有了更深入的理解，并能在实际项目中有效应用。如有任何疑问，欢迎留言交流。
关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！
weixin_33916256的博客
02-16 794
　　作为初次接触 AngularJS的新手，想要深层理解里面的内容短时间还是不可能的，所以标题写了浅谈字样，以下内容是参考各位大神以及相关书籍整理加个人理解，出现错误的地方请大家指正。 　　$scope(作用域)，为AngularJS中MVC的核心，整理起来很麻烦， 看着大神们发的一些文章对于$scope的理解，有些方面还是看不懂，作为新手，应该站在新手的位置上去思考，所以这篇文章的目的，...
angular中json对象push到数组中
okieM的博客
06-03 9638
在项目中，api要求的数据格式为$scope.data = { "name":"zhangsan", "Menus": [{"id":1},{"id":2}] }而我的返回格式为 $scope.data=["name":"zhangsan"] $scope.selected = [1，2，3];需要将两个数组整合，其中$scope.selected要先转化为json对象
angular js 对于数组的操作
qq_33159000的博客
07-18 1887
以下列数据为例，该数据为最终数据库要存放的json数据，那么，前台angular js 怎么传递对应的数据 ? conditions：{"condition":[{"key":"supplier_name","cenfix":"=","val":"12","suffix":"and","keyMap":"supplierName"}],"type":"GOODS"} 1.数据中的conditi
观察多个$ scope属性
w36680130的博客
05-09 183
Is there a way to subscribe to events on multiple objects using $watch 有没有办法使用$watch订阅多个对象上的事件 Eg
scope.row
Belle_Chou的博客
07-27 1万+
就是用插槽 拿到当前行 row是个内置的属性
angular删除数组中的某个元素
热门推荐
红鱼儿的博客
12-02 1万+
$scope.array.splice($.inArray(id, $scope.array), 1);
AngularJs输出字符串换行\n或<br/>不管用时，要用ng-bind-html配合解决
编程日常记录与总结 https://franciswmf.iteye.com
04-12 1万+
1、controller /*显示条件表达式*/ var myConExpController=['$scope', '$http','myCache', function($scope, $http,myCache) { //显示当前条件表达式 $scope.$on('showConExpEvent',function(event,data){ var len=data.len
angularjs表达式中的HTML内容，如何不转义，直接表现为html元素
u010552788的专栏
03-18 7716
默认情况下，AngularJS对会对插值指令求职表达式（模型）中的任何HTML标记都进行转义，例如以下模型： $scope.msg = “hello,<b>world</b>!” <p>{{msg}}</p> 渲染过程会对b标签进行转义，他们会议纯文本显示而非标记; 插值指令会对模型中任意html内容进行转义，这是为了防止html注入攻击。 如果因为某种理由，包含htm
Laravel 模型使用scope前缀的方法
记录编程生活
07-22 1542
Laravel中模型中可以定义scope开头方法，这类方法可以模型直接使用。这类方法也称作查询作用域 例子: 现有Post模型，内部定义一个scopeTitle()方法 public function scopeTitle($query, $title="") { return $query-&gt;where('title', $title); } 第一个参数...
AnjularJS 初学阶段（Anjularjs调取Java数据接口）
一米阳光
11-05 1007
首先写一个anjularjs的公用配置文件 var app=angular.module("app",[]); app.constant("http","http://·············"); 在Controller编写 提交或者访问的地址 var delUrl = http + "/trafficPackage/del"; 提交或者访问依据的参数    
Angular Scope解析与应用
清箫的专栏
04-06 4718
Scope层级结构顶层服务对象$rootScope来源于ng模块，由$RootScopeProvider提供。因为ng模块是angular.bootstrap()执行时依赖的模块，所以在整个应用中都可以通过$rootScope引用，而且在这个应用中是唯一的。但唯一性仅限于单个应用内，因为服务都存在注入器中，而每个bootstrap应用有自己的注入器，所以，$rootScope作为一个服务，在不同的
pom文件中<scope>import</scope>和<scope>system</scope>意义分别是什么
最新发布
11-25
<scope>import</scope>和<scope>system</scope>都是POM文件中<dependency>标签的子标签，用于指定依赖的范围。具体意义如下： <scope>import</scope>：表示该依赖仅在dependencyManagement中使用，不会传递到项目的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值