本文实例分析了AngularJS的ng-repeat指令与范围继承关系。分享给大家供大家参考,具体如下:
ng-repeat指令的使用方式可以参考如下代码:
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ng-repeat
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.11.1.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/angular-1.2.25.js "祝辞& lt;/script>
& lt; script>
函数wholeController(范围、rootScope美元,美元注射器)
{
美元的范围。按钮=[“button1”、“button2”,“button3”);
美元的范围。btnFunc=function(值){
警报(价值);
};
}
& lt;/script>
& lt;/head>
& lt;身体ng-app>
ng-controller & lt; div id=暗谝弧?皐holeController”比;
& lt; div id=癰uttonDiv”比;
& lt;输入类型=鞍磁ァ眓g-repeat=卑磁ピ诎磁ァ癷d=癰tn{{美元指数}}" value=" https://www.yisu.com/zixun/{{按钮}}”ng-click=癰tnFunc(按钮);“/比;
& lt;/div>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/test " ng-click=皌estFunc();“比;
& lt;/div>
& lt;/body>
& lt;/html>
之前
这里需要注意:ng-click中访问按钮不需要使用{{按钮}}这种语法;而其他非AngularJS环境下,必须通过{{按钮}}这种方式取值.ng-repeat指令中美元指数代表遍历的数组的索引,从0开始。
我们知道ng-controller指令会创建一个新的作用域范围、测试代码如下:
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ng-repeat
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.11.1.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/angular-1.2.25.js "祝辞& lt;/script>
& lt; script>//美元范围是ng-controller指令新建的作用域
函数wholeController(范围、rootScope美元,美元注射器)
{
alert(美元范围。父母===rootScope美元);//输出正确的
}
& lt;/script>
& lt;/head>
& lt;身体ng-app>
ng-controller & lt; div id=暗谝弧?皐holeController”比;
& lt;/div>
& lt;/body>
& lt;/html>
之前
我们可以使用angular.element (domElement) .scope()方法来获得某一个DOM元素相关联的作用域。
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ng-repeat
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.11.1.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/angular-1.2.25.js "祝辞& lt;/script>
& lt; script>
函数wholeController(范围、rootScope美元,美元注射器)
{
美元的范围。按钮=[“button1”、“button2”,“button3”);
美元的范围。testFunc=function () {//拿到dom元素上关联的作用域
var scope0=angular.element ($ (" # btn0 ") [0]) .scope ();
var scope1=angular.element ($ (" # btn1 ") [0]) .scope ();
警报(scope0==scope1);//输出假的
警报(scope0。父母===美元范围);//真实的
警报(scope1。父母===美元范围);//真实的
};
}
& lt;/script>
& lt;/head>
& lt;身体ng-app>
ng-controller & lt; div id=暗谝弧?皐holeController”比;
& lt; div id=癰uttonDiv”比;
& lt;输入类型=鞍磁ァ眓g-repeat=卑磁ピ诎磁ァ癷d=癰tn{{美元指数}}" value=" https://www.yisu.com/zixun/{{按钮}}"/比;
& lt;/div>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/test " ng-click=皌estFunc();“比;
& lt;/div>
& lt;/body>
& lt;/html>
之前
可以看到ng-repeat指令会新建作用域,而且是为循环中的每个dom元素新建一个作用域。通过F12调试,可以看到scope0和scope1的内容如下:
可以看到scope0和scope1中都有一个按钮属性,这个属性就是从父作用域下继承得到的,很类似于JavaScript的原型链。
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ng-repeat
