AngularJS的ng-repeat指令与scope继承关系实例详解


Posted in Javascript onJanuary 21, 2017

本文实例分析了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="angular-1.2.25.js"></script>
    <script>
      function wholeController($scope,$rootScope,$injector)
      {
        $scope.buttons = ["button1","button2","button3"];
        $scope.btnFunc = function(value){
          alert(value);
        };
      }
    </script>
  </head>
  <body ng-app>
    <div id="first" ng-controller="wholeController">
      <div id="buttonDiv">
        <input type="button" ng-repeat="button in buttons" id="btn{{$index}}" value="{{button}}" ng-click="btnFunc(button);"/>
      </div>
      <input type="button" value="test" ng-click="testFunc();">
    </div>
  </body>
</html>

这里需要注意:ng-click中访问button不需要使用{{button}}这种语法;而其他非AngularJS环境下,必须通过{{button}}这种方式取值。ng-repeat指令中$index代表遍历的数组的索引,从0开始。

我们知道ng-controller指令会创建一个新的作用域scope,测试代码如下:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ng-repeat</title>
    <script src="jquery-1.11.1.js"></script>
    <script src="angular-1.2.25.js"></script>
    <script>
      //$scope是ng-controller指令新建的作用域
      function wholeController($scope,$rootScope,$injector)
      {
        alert($scope.$parent === $rootScope);//输出true
      }
    </script>
  </head>
  <body ng-app>
    <div id="first" ng-controller="wholeController">
    </div>
  </body>
</html>

我们可以使用angular.element(domElement).scope()方法来获得某一个DOM元素相关联的作用域。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ng-repeat</title>
    <script src="jquery-1.11.1.js"></script>
    <script src="angular-1.2.25.js"></script>
    <script>
      function wholeController($scope,$rootScope,$injector)
      {
        $scope.buttons = ["button1","button2","button3"];
        $scope.testFunc = function(){
           //拿到dom元素上关联的作用域
           var scope0 = angular.element($("#btn0")[0]).scope();
           var scope1 = angular.element($("#btn1")[0]).scope();
           alert(scope0 == scope1);//输出false
           alert(scope0.$parent === $scope);//true
           alert(scope1.$parent === $scope);//true
        };
      }
    </script>
  </head>
  <body ng-app>
    <div id="first" ng-controller="wholeController">
      <div id="buttonDiv">
        <input type="button" ng-repeat="button in buttons" id="btn{{$index}}" value="{{button}}" />
      </div>
      <input type="button" value="test" ng-click="testFunc();">
    </div>
  </body>
</html>

可以看到ng-repeat指令会新建作用域,而且是为循环中的每个dom元素新建一个作用域。通过F12调试,可以看到scope0和scope1的内容如下:

AngularJS的ng-repeat指令与scope继承关系实例详解

AngularJS的ng-repeat指令与scope继承关系实例详解

可以看到scope0和scope1中都有一个buttons属性,这个属性就是从父作用域下继承得到的,很类似于JavaScript的原型链。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ng-repeat</title>
    <script src="jquery-1.11.1.js"></script>
    <script src="angular-1.2.25.js"></script>
    <script>
      function wholeController($scope,$rootScope,$injector)
      {
        $scope.buttons = ["button1","button2","button3"];
        $scope.method1 = function(){
           var scope0 = angular.element($("#btn0")[0]).scope();
           scope0.buttons = ["a1","b1","c1"];
        };
        $scope.method2 = function(){
           var scope0 = angular.element($("#btn0")[0]).scope();
           scope0.$parent.buttons = ["a2","b2","c2"];
        };
        $scope.method3 = function(){
          var scope0 = angular.element($("#btn0")[0]).scope();
          scope0.buttons[0] = "a3";
          scope0.buttons[1] = "b3";
          scope0.buttons[2] = "c3";
        };
      }
    </script>
  </head>
  <body ng-app>
    <div id="first" ng-controller="wholeController">
      <div id="buttonDiv">
        <input type="button" ng-repeat="button in buttons" id="btn{{$index}}" value="{{button}}" />
      </div>
      <input type="button" value="method1" ng-click="method1();">
      <input type="button" value="method2" ng-click="method2();">
      <input type="button" value="method3" ng-click="method3();">
    </div>
  </body>
</html>

当点击method1、method2、method3的时候,我们希望将按钮button1、button2、button3替换掉。运行上面的代码可以发现:method2和method3都能成功达到目的,但是method1不能达到目的。这其实很类似C语言中传值,还是传引用的问题。

var obj = {"name":"aty"};
wrongChangeName(obj);
alert(obj.name);//仍然是aty
rightChangeName(obj);
alert(obj.name);//hehe
function rightChangeName(obj)
{
  obj.name="hehe";
}
function wrongChangeName(obj)
{
  obj = {"name":"hehe"};
}

wrongChangeName就类似于我们上面的method1,而rightChangeName类似于上面的method3。也就是说如果我们想在childScope中修改parentScope中某个属性的值,那么该属性一定不能是javascript基本数据类型,一定要是对象类型。而且不能直接通过=进行赋值修改,必须是调用对象的方法来修改。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
巧用canvas
Jan 21 #Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 #Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 #Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 #Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 #Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 #Javascript
JavaScript数组去重的6个方法
Jan 21 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Win10下Python环境搭建与配置教程
2016/11/18 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
python代码如何注释
2020/06/01 Python
爱游人:Travelliker
2017/09/05 全球购物
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
大学学雷锋活动总结
2014/06/26 职场文书
高中学校对照检查材料
2014/08/31 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
导游词之西递宏村
2019/12/10 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python