angularJS 嵌套控制器的model作用范围

最新推荐文章于 2021-05-22 12:05:12 发布

xuanwuziyou

最新推荐文章于 2021-05-22 12:05:12 发布

阅读量1.7k

点赞数

分类专栏： angular 文章标签： angularjs 控制器

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/52797702

版权

angular 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.首先一段相互有嵌套控制器的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div ng-app="myApp">

    <div ng-controller="firstController">
        <input type="text" ng-model="name">
        <input type="text" ng-model="age">
        {{ name }} {{ age }}

        <div ng-controller="secondController">
            <input type="text" ng-model="name">
            {{ name }}

            <div ng-controller="thirdController">
                <input type="text" ng-model="name">
                {{ name }}
            </div>
        </div>
    </div>

</div>

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="app/index.js"></script>
</body>
</html>

2.如上, firstController中包含着 senondController, senondController中又包含着thirdController

index.js文件中的angular代码如下：

var app=angular.module('myApp',[]);
app.controller("firstController",function($scope){
    $scope.name="张三丰";
    $scope.age=20;
 });

app.controller("secondController", function ($scope) {
});

app.controller('thirdController',function($scope){
});

我们仅在最外层的 firstController中定义了模型 name 和 age，而页面上我们要在secondController和thirdController中也展示name ，运行结果如下：