AngularJS的尼日利亚重复指令与范围继承关系实例详解

本文实例分析了AngularJS的尼日利亚重复指令与范围继承关系。分享给大家供大家参考，具体如下：

尼日利亚重复指令的使用方式可以参考如下代码：

！doctype html html lang=' en ' head meta charset=' utf-8 ' title ng-repeat/title script src=' http : jquery-1。11 .1 .js '/script script src=' http : angular-1。2 .25 .js’/script脚本函数整个控制器($ scope，$rootScope，$ injector){ $ scope。button=[' button 1 '，' button2 '，' button 3 ']；$ scope。btnfunc=函数(值){ alert(值)；};}/脚本/头体ng-app div id=' first ' ng-controller='整个controller ' div id=' button div '输入类型=' button ' ng-repeat=' button in button ' id=' BTN { $ index } } ' value=' { { button } } ' ng-click=' btnFunc(button)；'//div输入类型='按钮'值=' test ' ng-click=' TestFunc()；'/div /body/html这里需要注意：ng点击中访问按钮不需要使用{ {按钮}}这种语法；而其他非AngularJS环境下，必须通过{ {按钮}}这种方式取值ng-重复指令中$索引代表遍历的数组的索引，从0开始。

我们知道ng-控制器指令会创建一个新的作用域范围，测试代码如下：

！doctype html html lang=' en ' head meta charset=' utf-8 ' title ng-repeat/title script src=' http : jquery-1。11 .1 .js '/script script src=' http : angular-1。2 .25 .js '/script/$ scope是ng-控制器指令新建的作用域函数wholeController($scope，$rootScope，$injector) { alert($scope .$ parent===$ rootScope)；//输出true }/script/head body ng-app div id=' first ' ng-controller=' whole controller '/div/body/html我们可以使用角元素.范围()方法来获得某一个数字正射影像图元素相关联的作用域。

！doctype html html lang=' en ' head meta charset=' utf-8 ' title ng-repeat/title script src=' http : jquery-1。11 .1 .js '/script script src=' http : angular-1。2 .25 .js’/script脚本函数整个控制器($ scope，$rootScope，$ injector){ $ scope。button=[' button 1 '，' button2 '，' button 3 ']；$scope.testFunc=function(){ //拿到数字正射影像图元素上关联的作用域var范围0=角度。元素($(“# BTN 0”)[0]).scope()；var范围1=角度。元素($(“# BTN 1”)[0]).scope()；alert(范围0==范围1)；//输出假警报(范围0 .$ parent===$ scope)；//真实警报(范围1 .$ parent===$ scope)；//true }；}/脚本/头体ng-app div id=' first ' ng-controller='整个controller ' div id=' button div '输入类型=' button ' ng-repeat=' button '中的button ' id=' BTN { { $ index } } ' value=' { { button } } '//div输入类型=' button '值=' test ' ng-click=' TestFunc()；'/div /body/html可以看到尼日利亚重复指令会新建作用域，而且是为循环中的每个数字正射影像图元素新建一个作用域。通过F12调试，可以看到scope0和scope1的内容如下：

可以看到scope0和scope1中都有一个按钮属性，这个属性就是从父作用域下继承得到的，很类似于Java脚本语言的原型链。

！doctype html html lang=' en ' head meta charset=' utf-8 ' title ng-repeat/title script src=' http : jquery-1。11 .1 .js '/script script src=' http : angular-1。2 .25 .js’/script脚本函数整个控制器($ scope，$rootScope，$ injector){ $ scope。button=[' button 1 '，' button2 '，' button 3 ']；$ scope。方法1=函数(){ var scope 0=angular。元素($(“# BTN 0”)[0]).scope()；scope 0 . button=[' a1 '，' b1 '，' C1 ']；};$ scope。方法2=函数(){ var scope 0=angular。元素($(“# BTN 0”)[0]).scope()；scope0 .$家长。button=[' a2 '，' b2 '，' C2 ']；};$ scope。方法3=函数(){ var scope 0=angular。元素($(“# BTN 0”)[0]).scope()；范围0。按钮[0]=' a3 '；范围0。按钮[1]=' B3 '；范围0。按钮[2]=' C3 '；};}/脚本/头体ng-app div id=' first ' ng-controller='整个controller ' div id=' button div '输入类型=' button ' ng-repeat=' button '中的button ' id=' BTN { { $ index } } ' value=' { { button } } '//div输入类型=' button ' value=' method 1 ' ng-click=' method 1()；'输入类型='按钮'值='方法2 ' ng-click='方法2()；'输入类型='按钮'值='方法3 ' ng-click='方法3()；'/div /body/html当点击方法1、方法2、方法3的时候，我们希望将按钮按钮1、按钮2、按钮3替换掉。运行上面的代码可以发现：方法2和方法3都能成功达到目的，但是方法一不能达到目的。这其实很类似C语言中传值，还是传引用的问题。

var obj={ ' name ' : ' aty ' }；erravchangename(obj)；警惕姓名)；//仍然是atyrightChangeName(obj)；警惕姓名)；//呵呵函数右改名(obj){ obj。名称='呵呵；}函数erravchangename(obj){ obj={ ' name ' : ' heh ' }；}错误更改名称就类似于我们上面的方法1,而rightChangeName类似于上面的方法3 .也就是说如果我们想在儿童镜中修改parentScope中某个属性的值，那么该属性一定不能是爪哇岛描述语言基本数据类型，一定要是对象类型。而且不能直接通过=进行赋值修改，必须是调用对象的方法来修改。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

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