scope in Angularjs

cikenerd 發(fā)布于2019-08-19 17:07 / 1342人閱讀

摘要：基于原型的繼承性視圖存在嵌套的時候，內(nèi)層的是可以繼承到外層的數(shù)據(jù)的。這者的區(qū)別就是在中繼承了中的作用域。通過監(jiān)聽某個的是否發(fā)生變化來觸發(fā)相應的。第三個屬性值，當為規(guī)定的是比較對象的值，而不是引用。這樣可以非常好的將一些可服用的代碼抽離出來。

scope基于原型的繼承性

視圖存在嵌套的時候，內(nèi)層的controller是可以繼承到外層的controller數(shù)據(jù)的。

scope在angularjs里的繼承性(基于原型的繼承性)：

    html: 
    
    
        Parent  {{info}}
        
            child  {{info}}

當頁面一開始加載完畢之后，通過在parent的input里面輸入內(nèi)容的時候，在child的input里面也會發(fā)生響應。這個時候，subController里的info的值，是繼承parent里面的mainController的值。

此時，如果在child的input里面輸入內(nèi)容，會發(fā)現(xiàn)child里面的info發(fā)生了變化，但是parent里面并未發(fā)生變化。

此時如果在parent的Input里面輸入值的話，僅僅是Parent的info發(fā)生了變化，而child的info是不會發(fā)生變化的。

然后我再換一種寫法

    html:
   
    
        parent  {{msg.info}}
            
                child  {{msg.info}}
            
    
    
    js: 
    app.controller("mainController", function(){
        $scope.msg = {
            info: "message"
        };
    });
    app.controller("subController", function(){
        
    });

ng-model此時變成了某個對象的屬性。那么現(xiàn)在不管你更改的是parent中的input還是child中的input，都會引起視圖相應的變化。

這2者的區(qū)別就是在subController中繼承了mainController中的作用域。當ng-model是primitive值時，剛初始化的時候，在subController里面因為，會新建一個相同的變量，這個時候，如果再在subController里面獲取這個primitive的時候，就直接在subController里面就能得到。

而如果mainController里面的ng-model是個對象的屬性的時候，subController里面ng-model是對這個對象的引用。那么不管更改mainController還是subController里面的ng-model視圖里面都會發(fā)生變化。

在Angularjs里面$scope有個$watch方法,當需要時更新DOM。通過監(jiān)聽某個model的是否發(fā)生變化來觸發(fā)相應的callback。

依然是上面的例子：

     html:
   
    
        parent  
    
    
    js: 
    app.controller("mainController", function(){
        $scope.msg = {
            info: "message"
        };
        
        $scope.$watch("msg", function(val){
            console.log(val);
        })
    });

除了頁面初始化后，控制臺會輸出{info: "message"}外，不過input里面的值如何變化?？刂婆_都不會輸出任何內(nèi)容了。這是因為$watch是比較的msg這個對象的引用是否發(fā)生了變化，很顯然這個地方msg的引用(heap里面存放的地址)并沒用發(fā)生變化，僅僅是msg.info的值發(fā)生了變化。
但是我改變另外一種寫法：

    $scope.$watch("msg", function(val){
        console.log(val);
    }, true);

這個是否就能監(jiān)聽到msg.info發(fā)生變化后,msg的內(nèi)容了。第三個屬性boolean值，當為true,規(guī)定的是比較對象的值，而不是引用。

ng-repeat會給每個循環(huán)新建一個作用域。

ng-include和ng-view都是動態(tài)加載視圖，這個時候也會新建作用域

當然還有ng-switch,directive也會有這種scope繼承的情況出現(xiàn)。

具體深入理解angularjs的scope，請移步Understanding scopes

Angularjs 1.2 “Controller as” polyfill

    html:
    
    
        {{parent.name}}
        
            {{child.name}}
        
    
    
    js:
    
    app.controller("parentController", ApiParentFn);
    
    function ApiCtrlFn(){
        this.name = "XL";
    }
    
    app.controller("childController", ApiChildFn);
    
    function ApiChildFn(){
        this.name = "xl";
    }

最后視圖內(nèi)容大家可以動手試試。

最近也試著多用這個語法去寫控制器，首先寫法上更偏向OO的風格。在這個ApiParetnFn上定義不同的model。

    app.controller("mainCtrl", ["$http", ApiCtrlFn]);
    
    function ApiCtrlFn(http){
        this.http = http;
        this.name = "XL";
    }
    
    ApiCtrlFn.prototype = {
        reqPostFn: function(url){
            this.http.get(url).success(function(data){
                xxxx
            })
            .error(function(data){
                xxxx
            })
        },
        changeNameFn: function(name){
            this.name = name;
        }
    }
    
    html:
    
    
        {{this.name}}

在ApiParentFn.prototype上定義不同的方法。這樣可以非常好的將一些可服用的代碼抽離出來。不同的控制器只需要對構造函數(shù)進行實例化，然后調(diào)用不同的原型上定義的方法就OK了。

云服務器 GPU云服務器 Scopes Scoping scoped scope

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78210.html

創(chuàng)建自定義指令

摘要：我們通常通過其區(qū)分大小寫的規(guī)范化名稱例如，來定義指令。在其目前的實現(xiàn)上，我們應該需要去創(chuàng)建一些不同點控制器用來重用這個指令。如此，綁定是理想的將回調(diào)函數(shù)綁定到指令行為。這被指令調(diào)用指明。前綴表示該指令在其父元素上搜索控制文檔翻譯至angularjs.org. 文檔解釋了您何時想在AngularJS應用程序中創(chuàng)建自己的指令，以及如何實現(xiàn)它們。 | 建議搭配原文食用 | 什么是指令？在...

zzbo 2019-08-26 11:55 評論0 收藏0
Controller As in Angularjs

摘要：因為在里面是基于原型進行繼承的。事實上注入后，即提供了一個，可以在這個上面綁定屬性和方法。當使用語法的時候，事實上是綁定到了的對象上面。注意這個地方執(zhí)行順序是從子元素開始再到父元素的。即在執(zhí)行階段前確保執(zhí)行完畢。 Controller As angular .module(app, []) .controller(DemoController, ...

mo0n1andin 2019-08-19 17:14 評論0 收藏0
angular性能優(yōu)化心得

摘要：本文針對的讀者具備性能優(yōu)化的相關知識雅虎條性能優(yōu)化原則高性能網(wǎng)站建設指南等擁有實戰(zhàn)經(jīng)驗。這種機制能減少瀏覽器次數(shù)，從而提高性能。僅會檢查該和它的子，當你確定當前操作僅影響它們時，用可以稍微提升性能。搬運自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不覺，在項目中用angular已經(jīng)半年多了，踩了很多坑...

guqiu 2019-08-19 14:44 評論0 收藏0
Angularjs 開發(fā)指南自定義指令（custom directives）

摘要：使用開發(fā)，很重要的一步是需要開發(fā)自定義的指令。接下來分幾個步驟記錄如何開發(fā)一個自定義的指令。對這個元素及其子元素進行變形之類的操作是安全的。鏈接函數(shù)鏈接函數(shù)負責注冊事件和更新。說明和是指令的關鍵部分，留在下一章中詳細討論。使用Angularjs開發(fā)，很重要的一步是需要開發(fā)自定義的指令（custom directives）。接下來分幾個步驟記錄如何開發(fā)一個自定義的指令。目錄：指令...

calx 2019-08-19 18:15 評論0 收藏0
使用AngularJS構建應用時遇到的問題及解決方案（版本為1.3.9）

摘要：最近在公司使用用完成了一個項目，在此記錄一下過程中遇到的問題及解決方案。其他兩種方法可參考站內(nèi)文章控制器如何通信結語以上為我在編寫一個應用時遇到的問題及解決方案，記錄并分享出來，歡迎大家指正最近在公司使用用AngularJS（1.3.9）完成了一個項目，在此記錄一下過程中遇到的問題及解決方案。使用$http服務發(fā)送ajax請求時后端無法判斷請求是XMLHttpRequest 問題...

cuieney 2019-08-19 17:25 評論0 收藏0