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 css样式操作代码(批量操作)
Oct 09 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
jquery if条件语句的写法
May 19 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
node+vue实现文件上传功能
May 28 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 Javascript
巧用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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php生成缩略图的类代码
2008/10/02 PHP
php字符串函数学习之substr()
2015/03/27 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
微信小程序选择图片控件
2021/01/19 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python利用正则表达式提取字符串
2016/12/08 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
基于python操作ES实例详解
2019/11/16 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
如何理解Python中的变量
2020/06/01 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
业务员辞职信范文
2015/03/02 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python