歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

AngularJS筆記---作用域和控制器

什麼是作用域. 什麼是控制器, 作用域包含了渲染視圖時所需的功能和數據,它是所有視圖的唯一源頭。可以將作用域理解成試圖模型(ViewModel). 作用域之間可以是包含關系也可以是獨立關系.可以通過設置不同的ng-Controller來讓$scope處於不同的作用域下面。

一.$rootScope

1.1 rootScope可以理解成全局變量,一旦賦值對整個module都有效. rootScpoe不依賴於任何一個controller,  app.run是module被加載時候執行的代碼. 可以理解成Silverlight MVVM裡面的oninit方法.

<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myapp',[]);
    app.run(function($rootScope){
        $rootScope.message="hello frank!";
    });
</script>
<head>
    <div ng-app="myapp">
        <h1>{{ message }}</h1>
    </div>
</head>
<body>
</body>
</html>

1.2 AngularJS會優先獲取Controller中$scope添加的值.

代碼如下: 分別有三個{message}.  testControl2中在$scope中重新賦予了message值.

<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myapp',[]);
    app.run(function($rootScope){
        $rootScope.message="hello frank!";
    });

    app.controller('testControl1',function(){
       
    });

    app.controller('testControl2',function($scope){
        $scope.message = "hello loch!";
    });
   
</script>
<head>
    <div ng-app="myapp">
        {{ message }}
        <div ng-controller="testControl1">
            {{ message }}
        </div>
        <div ng-controller="testControl2">
            {{ message }}
        </div>
    </div>
</head>
<body>
</body>
</html>

運行結果:  testControl2下的message被修改了.       

hello frank!
hello frank!
hello loch!

          二. 控制器(ng-Controller)

            ng-Controller氛圍兩種情況一種是包含,另一種是獨立. 我們暫且叫做 父子關系和兄弟關系吧.

            2.1 父子關系

            2.1.1 代碼如下:ChildController 包含在了ParentController裡面, 兩個button都對Count字段進行賦值。

<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myapp',[]);

    app.controller('ParentController',function($scope){
        $scope.Count = 1;
        $scope.addParent = function(){
            $scope.Count+=1;
        }
    });

    app.controller('ChildController',function($scope){
        // $scope.Count = 1;
        $scope.addChild = function(){
            $scope.Count+=1;
        }
    });
   
</script>
<head>
    <div ng-app="myapp">
        <div ng-controller="ParentController">
            <span>{{ Count }}</span>
            <button ng-click="addParent()">ParentClick</button>
            <div ng-controller="ChildController">
                <span> {{Count}} </span>
                <button ng-click="addChild()">ChildClick</button>
            </div>
        </div>
    </div>
</head>
<body>
</body>
</html>

2.1.2 運行結果:(在上面demo中,有一串被注釋掉的代碼,)

A 代碼被注解: 當一開始點擊ParentClick的時候兩個Count一起增加, 然後點擊ChildClick的時候只有ChildDiv的Count在增加,然後再回去點擊ParentClick的時候,就只有ParentCount在自增

B.代碼沒被注解: 兩者之間的自增都是獨立分開的,互補關聯.

2.1.3 總結:

因為在AngularJS中會默認先找當前Controller下的值,找不到再去找父類Controller值,如果還找不到就去找rootScope的值,對於A類情況在沒點擊ChildClick的時候,ChildController還沒有設置Count的值,那麼對應的Count只有先去取ParentController裡面的 scope.count的值. 當點擊了ChildClick後,ChildController中的$scope.count被創建,然後兩個Controller就此開始獨立.

2.2 兄弟關系. 

運行結果: 兩個Controller下的Count獨立,自增互不影響.   

<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myapp',[]);

    app.controller('BrotherOne',function($scope){
        $scope.Count = 1;
        $scope.addParent = function(){
            $scope.Count+=1;
        }
    });

    app.controller('BrotherTwo',function($scope){
        $scope.Count = 1;
        $scope.addChild = function(){
            $scope.Count+=1;
        }
    });
   
</script>
<head>
    <div ng-app="myapp">
        <div ng-controller="BrotherOne">
            <span>{{ Count }}</span>
            <button ng-click="addParent()">ParentClick</button>         
        </div>
        <div ng-controller="BrotherTwo">
                <span> {{ Count }} </span>
                <button ng-click="addChild()">ChildClick</button>
        </div>
    </div>
</head>
<body>
</body>
</html>

三. 本篇總結     

A.$rootScope == 全局變量
B.綁定的變量默認先從當前Controller的$scope去取

一些AngularJS相關文章鏈接

AngularJS權威教程 清晰PDF版  http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved