1. 程式人生 > >AngularJS入門 AngularJS控制器 AngularJS常見內建指令

AngularJS入門 AngularJS控制器 AngularJS常見內建指令

每一個AngularJS應用,都有唯一的一個全域性作用域範圍,也稱為根作用域,Angular中其他的作用域都

是這個根作用域的後代/子作用域。

AngularJS的根作用域/全域性作用域:$rootScope。

根作用域使用時,通過注入的方式新增到控制器處理函式的入參中。

$watch:   $scope物件上,有一個$watch()函式,用於監聽模型資料的變化:

//1. 監聽單個普通變數
        $scope.$watch("name", function() {
            TODO name屬性發生變化執行的函式程式碼
        })
        // 2. 監聽多個變數
        $scope.$watch("name + age", function() {
            // TODO name或者age變數的資料發生變化執行的函式程式碼
        })
        // 3. 監聽物件的資料
        $scope.$watch("users.username", function() {
            // TODO usres物件中的username屬性一旦發生變化執行的函式程式碼
        })
        // 4. 監聽物件的所有屬性
        $scope.$watch("users", function() {
            // TODO 監聽users物件的所有屬性,任一屬性值發生變化執行函式程式碼
        },true)
        // 5. 監聽陣列資料~而不監聽陣列中的物件資料
        $scope.$watchCollection("goodses", function() {
            // TODO 一旦goodses陣列中的元素,被刪除、新增時執行函式的程式碼
        })
        // 6. 監聽資料發生變化的細節:修改前 VS 修改後
        $scope.$watch("username", function(newValue, oldValue) {
            console.log("資料被修改了", newValue, oldValue);
        })
        // 7. $watch可以重複,不會被覆蓋,都會執行!
        $scope.$watch("username", function(newValue, oldValue) {
            console.log("data changed:", newValue, oldValue);
        })
  //8.$scope.$apply();// 重繪資料

多個控制器:

為了方便多個控制器中的公共資料初始化
    AngularJS提供了一個全域性作用域物件$rootScope
    AngularJS應用中,僅有一個全域性作用域,其他所有的$scope作用域都是$rootScope的子元素
        使用$rootScope,可以用於初始化全域性變數和函式
        但是存在一個問題: 因為控制器函式中可以直接使用$rootScope,就有可能會造成全域性資料汙染
        規範:$rootScope一般和Angular模組的run()方法一起使用。來進行全域性資料的初始化