簡話Angular 02 Angular控制器-做用域嵌套

時間 2019-11-12

原文原文鏈接

一句話: 就是孩子能夠啃老,老子不能動孩子一根毛!css

* 子控制器有父控制器裏變量的全部權限,能夠讀取,也能夠修改.html

* 父控制器不能讀,也不能修改孩子的變量git

1. html代碼github

<div ng-controller="ParentController">
    <h3><strong>父控制器</strong></h3>
    <label>姓名: </label> <input type="text" ng-model='person.name'>
    <label>年齡: </label> {{person.age}}
    <label>職業: </label> {{person.career}}
    <label>出生地: </label> {{child.birth}}
    <br><label>工做: </label> <input type="text" ng-model="job">

    <div ng-controller="ChildController">
        <h3><strong>子控制器</strong></h3>
        <label>年齡: </label> <input type="text" ng-model='person.age'>
        <label>姓名: </label> {{person.name}}
        <label>職業: </label> <input type="text" ng-model='person.career'>
        <label>出生地: </label> <input type="text" ng-model='child.birth'> 
        <button ng-click="updateBirth()">更新出生地</button>
        <br><label>工做: </label> <input type="text" ng-model="job">
    </div>
</div>

2. Javascript代碼bootstrap

<script>
    var  myApp = angular.module('myApp', []);
    myApp.controller('ParentController', function($scope) {
        $scope.person = {name: '李三', age: 15};

    });

    myApp.controller('ChildController', function($scope) {
        $scope.child = {};

        $scope.updateBirth = function() {
            $scope.child.birth = "蘇州";
        }
    });
</script>

3. 源碼和查看效果app

1) 查看效果: http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/2-controller-scope.htmlspa

2)源代碼: https://github.com/jimuyouyou/angular-bootstrap-rest-seed雙向綁定

3. 解釋rest

一句話: 就是孩子能夠啃老,老子不能動孩子一根毛!code

* 子控制器有父控制器裏變量的全部權限,能夠讀取,也能夠修改.

* 父控制器不能讀,也不能修改孩子的變量

1. 父控制器-打開頁面就顯示姓名, 說明$scope變量值更新了,頁面會自動響應

2. 子控制器-打開頁面就顯示姓名, 說明嵌套控制器也嵌套上下文,子scope能夠使用全部父scope的變量(由於兒子裏沒有person的定義)

3. 修改子控制器的年齡,父控制器年齡也更新, 說明子scope能夠改變父scope裏邊變量的值

4. 修改子控制器的出生地,父控制器沒有更新的,說明子scope的變量,父scope無權讀取和修改(由於child.birth只在子scope裏邊)

5. 點擊更新出生地,出生地值變化,說明$scope也能夠更新html元素值,就是雙向綁定

6. 父控制器裏輸入工做,子控制器跟着顯示,說明父子同名變量時,孩子若是爲空,能夠從父親那裏取-啃老

7. 子控制器時輸入工做,父控制器不更新的,說明父子同名變量時,孩子若是有值了,老子拿不到-啃老不敬老

4. 所有源碼

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>2-controller-scope.html</title>
    <link rel='stylesheet' href='../../libs/bootstrap3.1.1/css/bootstrap.min.css' />
    <script src='../../libs/angular1.3.13/angular.js'></script>
</head>
<body class="container">

<div ng-controller="ParentController">
    <h3><strong>父控制器</strong></h3>
    <label>姓名: </label> <input type="text" ng-model='person.name'>
    <label>年齡: </label> {{person.age}}
    <label>職業: </label> {{person.career}}
    <label>出生地: </label> {{child.birth}}
    <br><label>工做: </label> <input type="text" ng-model="job">

    <div ng-controller="ChildController">
        <h3><strong>子控制器</strong></h3>
        <label>年齡: </label> <input type="text" ng-model='person.age'>
        <label>姓名: </label> {{person.name}}
        <label>職業: </label> <input type="text" ng-model='person.career'>
        <label>出生地: </label> <input type="text" ng-model='child.birth'> 
        <button ng-click="updateBirth()">更新出生地</button>
        <br><label>工做: </label> <input type="text" ng-model="job">
    </div>
</div>    

<br><br>
<div class="bg-info">
    <label>
        * 子控制器有父控制器裏變量的全部權限,能夠讀取,也能夠修改.     <p></p>
        * 父控制器不能讀,也不能修改孩子的變量<p></p>
        * <span class="bg-danger">就是孩子能夠啃老,老子不能動孩子一根毛!</span>
    </label>
    <p></p>
    1. 父控制器-打開頁面就顯示姓名, 說明$scope變量值更新了,頁面會自動響應 <p></p>
    2. 子控制器-打開頁面就顯示姓名, 說明嵌套控制器也嵌套上下文,子scope能夠使用全部父scope的變量(由於兒子裏沒有person的定義) <p></p>
    3. 修改子控制器的年齡,父控制器年齡也更新, 說明子scope能夠改變父scope裏邊變量的值<p></p>
    4. 修改子控制器的出生地,父控制器沒有更新的,說明子scope的變量,父scope無權讀取和修改(由於child.birth只在子scope裏邊) <p></p>
    5. 點擊更新出生地,出生地值變化,說明$scope也能夠更新html元素值,就是雙向綁定<p></p>
    6. 父控制器裏輸入工做,子控制器跟着顯示,說明父子同名變量時,孩子若是爲空,能夠從父親那裏取-啃老<p></p>
    7. 子控制器時輸入工做,父控制器不更新的,說明父子同名變量時,孩子若是有值了,老子拿不到-啃老不敬老<p></p>
</div>

<script>
    var  myApp = angular.module('myApp', []);
    myApp.controller('ParentController', function($scope) {
        $scope.person = {name: '李三', age: 15};

    });

    myApp.controller('ChildController', function($scope) {
        $scope.child = {};

        $scope.updateBirth = function() {
            $scope.child.birth = "蘇州";
        }
    });
</script>
    
</body>
</html>