AngularJS中ng-repeat使用心得

最新推荐文章于 2018-05-25 21:52:06 发布

zhu jun~

最新推荐文章于 2018-05-25 21:52:06 发布

阅读量5.1k

点赞数

文章标签： angularjs ne-repeat 子作用域

本文链接：https://blog.csdn.net/zhujun_xiaoxin/article/details/53333015

版权

ng-repeat这样类似的指令是会创建一个新的作用域的，并且创建的新的作用域是原型继承的。这点其实和我的一篇《AngularUI之Modal的子作用域研究》类似，这次我也对指令的子作用域进行了研究，发现他们的创建子作用的方式是一样的。
下面是我的实验代码：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MyController">
        <input type="text" ng-model="commentContent"/>
        <input type="text" ng-model="cup.color"/>
        <div ng-repeat="name in names">
            <span>{{name.firstName}}</span>
            <span>{{name.lastName}}</span>
            <input type="text" ng-model="commentContent"/>
            <input type="text" ng-model="cup.color"/>
        </div>
    </div>
    <script>
        var app = angular.module("app",[]);
        app.controller("MyController",function($scope){
            $scope.commentContent = "aaa";
            $scope.cup = { color: "green"};
            $scope.trees = [{},{}];
            $scope.names = [{firstName:"john",lastName:"tech"},{firstName:"jack",lastName:"boom"}];
            $scope.end = "happy ending";
            $scope.name = {firstName:"aaa",lastName:"bbb"};
            $scope.changeParent = function(event){
                var keyCode = window.event?event.keyCode:event.which;
                if(keyCode == 13){
                    $scope.commentContent = "bbb";
                };
            };
        });
    </script>
</body>
</html>

得出的结论是：
ng-repeat这样类似的指令创建的子作用域，基本类型的变量是值传递，对象和数组是地址传递。也就是说，ng-repeat创建的子作用域会继承父作用域的值和对象，如果对子作用域继承的基本类型变量修改，父作用域的值不会改变，对子作用域继承的对象和数组进行修改，父作用域的值也会跟着改变。

zhu jun~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJS中ng-repeat使用心得

ng-repeat这样类似的指令是会创建一个新的作用域的，并且创建的新的作用域是原型继承的。这点其实和我的一篇《AngularUI之Modal的子作用域研究》类似，这次我也对指令的子作用域进行了研究，发现他们的创建子作用的方式是一样的。下面是我的实验代码：<!DOCTYPE html><html lang="en" ng-app="app"><head> <meta charset
复制链接

扫一扫