AngularJS ng-if 创建子scope作用域

最新推荐文章于 2024-04-19 09:40:58 发布

xiaoguangtouqiang

最新推荐文章于 2024-04-19 09:40:58 发布

阅读量1.5k

点赞数

分类专栏：基础知识前端 Angularjs 文章标签： Angularjs ng-if 子属性

本文链接：https://blog.csdn.net/xiaoguangtouqiang/article/details/80482889

版权

基础知识同时被 3 个专栏收录

60 篇文章 2 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

Angularjs

5 篇文章 0 订阅

订阅专栏

ng-if directive会创建一个子scope，同时继承父scope的属性值；对于值类型的变量来说，如果修改了ng-if中的变量的值，父scope中的值是不会修改的；引用类型来说，如果修改了引用类型的子属性，父类型中的引用的子属性对于是可以修改的；举个例子，页面效果如图，上面是body的对应值，下面是ng-if中的效果显示，我们通过修改input绑定的ng-model属性值变化，观察body里面的和ng-if里面的值的变化情况。

代码如下所示，你可以建一个html，把代码放进去，观察效果更好点；

<html ng-app="MyApplication">
<head>
    <title>ѧϰ Angularjs1.x</title>
</head>
<body ng-controller="HelloWorld">
obj.text:{{obj.text}}
<br/>
text:{{text}}
<br/>
================================
<div ng-if="1===1">
    <input type="text" ng-model="obj.text">
    <br/>
    {{obj.text}}
</div>

<div ng-if="1===1">
    <input type="text" ng-model="text">
    {{text}}
    <br/>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<script type="text/javascript">
    angular.module('MyApplication', [])
        .controller('HelloWorld', ['$scope', function ($scope) {
            $scope.text = "helloWorld";
            $scope.obj = {
                text: 'hello my world'
            }
        }]);
</script>
</body>
</html>

1>改变第二个input框中的值，可以看到body中的text还是原来的值，ng-if中text的值变化了；

2>改变第一个input框中的值，body中的obj.text和ng-if中的obj.text都发生变化了；

3>修改下代码，加上$parent，之后修改input中text的值，ng-if里面和body中的同步发生修改；因为这里的ng-model指代的是ng-if父parent的text了，而不是ng-if自己创建出来的子scope中的值