国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

scope in Angularjs

cikenerd / 1339人閱讀

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

scope基于原型的繼承性

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

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

    html: 
    
    

        Parent  {{info}}
        

            child  {{info}}

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

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

此時(shí)如果在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此時(shí)變成了某個(gè)對象的屬性。那么現(xiàn)在不管你更改的是parent中的input還是child中的input，都會引起視圖相應(yīng)的變化。

這2者的區(qū)別就是在subController中繼承了mainController中的作用域。當(dāng)ng-model是primitive值時(shí)，剛初始化的時(shí)候，在subController里面因?yàn)椋瑫陆ㄒ粋€(gè)相同的變量，這個(gè)時(shí)候，如果再在subController里面獲取這個(gè)primitive的時(shí)候，就直接在subController里面就能得到。

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

在Angularjs里面$scope有個(gè)$watch方法,當(dāng)需要時(shí)更新DOM。通過監(jiān)聽某個(gè)model的是否發(fā)生變化來觸發(fā)相應(yīng)的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)容了。這是因?yàn)?b>$watch是比較的msg這個(gè)對象的引用是否發(fā)生了變化，很顯然這個(gè)地方msg的引用(heap里面存放的地址)并沒用發(fā)生變化，僅僅是msg.info的值發(fā)生了變化。
但是我改變另外一種寫法：

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

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

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

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

當(dāng)然還有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)容大家可以動手試試。

最近也試著多用這個(gè)語法去寫控制器，首先寫法上更偏向OO的風(fēng)格。在這個(gè)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上定義不同的方法。這樣可以非常好的將一些可服用的代碼抽離出來。不同的控制器只需要對構(gòu)造函數(shù)進(jìn)行實(shí)例化，然后調(diào)用不同的原型上定義的方法就OK了。

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

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

相關(guān)文章

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

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

    zzbo 評論0 收藏0

  • Controller As in Angularjs

    摘要：因?yàn)樵诶锩媸腔谠瓦M(jìn)行繼承的。事實(shí)上注入后，即提供了一個(gè)，可以在這個(gè)上面綁定屬性和方法。當(dāng)使用語法的時(shí)候，事實(shí)上是綁定到了的對象上面。注意這個(gè)地方執(zhí)行順序是從子元素開始再到父元素的。即在執(zhí)行階段前確保執(zhí)行完畢。 Controller As angular .module(app, []) .controller(DemoController, ...

    mo0n1andin 評論0 收藏0

  • angular性能優(yōu)化心得

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

    guqiu 評論0 收藏0

  • Angularjs 開發(fā)指南 自定義指令（custom directives）

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

    calx 評論0 收藏0

  • 使用AngularJS構(gòu)建應(yīng)用時(shí)遇到的問題及解決方案（版本為1.3.9）

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

    cuieney 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<