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 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 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
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
学习ExtJS form布局
2009/10/08 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
学习python的几条建议分享
2013/02/10 Python
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python单元测试unittest实例详解
2015/05/11 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python 初始化一个定长的数组实例
2019/12/02 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
法制教育演讲稿
2014/09/10 职场文书
给老师的感谢信
2015/01/20 职场文书
股份转让协议书范本
2015/01/27 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
公司安全管理制度范本
2015/08/05 职场文书
法院执行局工作总结
2015/08/11 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android