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 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
javascript 快速排序函数代码
May 30 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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
php 获取远程网页内容的函数
2009/09/08 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
图片之间的切换
2006/06/26 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
vue接口请求加密实例
2020/08/11 Javascript
python如何读写json数据
2018/03/21 Python
Python读写docx文件的方法
2018/05/08 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python 实现生成均匀分布的点
2019/12/05 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
同学聚会主持词
2014/03/18 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
廉洁自律证明
2015/06/24 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
python中数组和列表的简单实例
2022/03/25 Python