成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用controllerAs代替$scope

myshell / 3057人閱讀

摘要：我們用查看一下發(fā)現(xiàn)確實(shí)是這樣。而在中，假設(shè)我們使用將控制器自身掛載在上，也變?yōu)?，就不?huì)存在上述的一層層查找的過程。的作用的作用也很好理解也就是將屬性綁定到自身上。

controllerAs做了什么

我們?cè)诙x路由時(shí)

.state("account.register", {
    url: "/register",
    templateUrl: "app/account/register.html",
    controller: "RegisterCtrl",
    controllrtAs: "vm"
})

在angular的源代碼中:

locals.$scope[state.controllerAs] = controllerInstance;

可以發(fā)現(xiàn)angular把控制器的實(shí)例作為$scope上以controllerAs的值為名稱的對(duì)象屬性上了。
我們用Batarang查看一下

發(fā)現(xiàn)確實(shí)是這樣。

為什么要使用controllerAs

$scope是基于原型進(jìn)行繼承的，比如說當(dāng)我們查找一個(gè)user對(duì)象時(shí)，angular會(huì)先查找當(dāng)前$scope有沒有user，如果沒有的話就繼續(xù)往上層$scope查找，直至$rootScope。

而在controllerAs中，假設(shè)我們使用controllerAs

UserCtrl as ctrl
angular將控制器自身掛載在$scope上，user也變?yōu)閏trl.user，就不會(huì)存在上述的一層層查找的過程。在很多情況下，比如在嵌套的路由中，上述$scope基于原型的查找，有時(shí)候確實(shí)會(huì)提供一些便利，但這些都可以用服務(wù)來實(shí)現(xiàn)，也應(yīng)該使用服務(wù)來實(shí)現(xiàn)。

大家在初次接觸angular時(shí)一定會(huì)被推薦過將所有數(shù)據(jù)都綁定在$scope的一個(gè)對(duì)象上（比如$scope.data）來避免一些js中值的復(fù)制和對(duì)象的引用可能會(huì)造成的一些問題（公司里的新人大部分也確實(shí)遇到過這類問題），而使用controllerAs后就不需要這一步了，因?yàn)槿思冶緛砭褪恰?/p>

因?yàn)椴皇褂?scope也就不能使用$on,$watch,$emit之類的方法，這些方法本來就應(yīng)該盡量少用，這樣就可以更好的控制項(xiàng)目中的代碼，當(dāng)不得不用這類方法時(shí)可以參考下面的案例。

便于新人學(xué)習(xí)，我發(fā)現(xiàn)新人對(duì)于$scope這個(gè)東西往往無法理解，而用controllerAs vm之后，則將vm（view model的簡(jiǎn)寫）作為視圖模型則比較好理解。

當(dāng)必須要使用$watch（$on、$emit、$broadcast）時(shí)該怎么做

當(dāng)出現(xiàn)這種情況時(shí)我們可以把$scope當(dāng)做單純的一種服務(wù)來使用，他提供了上述的方法，比如:

function MyCtrl ($scope) {
    var vm = this;
    vm.name = "liulei";
    vm.count = 0;
    $scope.$watch("vm.count", function (newVal, oldVal) {
        vm.count ++;
    });
}
在指令中使用controllerAs

在指令中如果不需要數(shù)據(jù)綁定時(shí)，我們簡(jiǎn)單的將scope這個(gè)選項(xiàng)設(shè)置為true或者{}即可，可當(dāng)我們需要從外部綁定一個(gè)值或者對(duì)象到指令中該怎么辦呢？因?yàn)槲覀冎廊绻胹cope選項(xiàng)的話，肯定是綁定到指令的scope對(duì)象上的，這里我們直接使用bindToController選項(xiàng)即可，上代碼

"use strict";
angular.module("nodeInAction")
.directive("countCard", function () {
    return {
        restrict: "E",
        controllerAs: "vm",
        scope: {},
        bindToController: {
            icon: "@",
            title: "@",
            count: "@",
            unit: "@",
            colorStyle: "@"
        },
        templateUrl: "app/components/countCard/countCard.html",
        controller: function () {
            var vm = this;        
            console.log(vm);
        }
    };
});


結(jié)果也是我們想要的結(jié)果。bindToController的作用的作用也很好理解也就是將屬性綁定到controller自身上。
也可以這樣寫

"use strict";
angular.module("nodeInAction")
.directive("countCard", function () {
    return {
        restrict: "E",
        scope: {
            icon: "@",
            title: "@",
            count: "@",
            unit: "@",
            colorStyle: "@"
        },
        controllerAs: "vm",
        bindToController: true,
        templateUrl: "app/components/countCard/countCard.html",
        controller: function () {
            var vm = this;        
            console.log(vm);
        }
    };
});

效果是一樣的。

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

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

相關(guān)文章

  • Controller As in Angularjs

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

    mo0n1andin 評(píng)論0 收藏0

  • angular自定義指令詳解

    摘要：在運(yùn)用的時(shí)候，運(yùn)用自定義指令可以寫一些組件，非常方便。這里給大家分享一些關(guān)于自定義指令的知識(shí)。 在運(yùn)用angularjs的時(shí)候，運(yùn)用自定義指令可以寫一些組件，非常方便。這里給大家分享一些關(guān)于angular自定義指令的知識(shí)。 1. 定義 對(duì)于指令，可以把它簡(jiǎn)單的理解成在特定DOM元素上運(yùn)行的函數(shù)，指令可以擴(kuò)展這個(gè)元素 的功能。 2.定義指令的方法： angular.module(myAp...

    PingCAP 評(píng)論0 收藏0

  • 如何在angular.js中優(yōu)雅的使用ui.bootstrap的modal組件

    摘要：提供唯一的方法配置。即文件名，在同一個(gè)頁(yè)面有多個(gè)不同業(yè)務(wù)的模態(tài)框的情況下很方便點(diǎn)擊確認(rèn)按鈕執(zhí)行的代碼可以從中獲取和字段進(jìn)一步操作發(fā)起請(qǐng)求等點(diǎn)擊取消按鈕執(zhí)行的代碼 ui.bootstrap的modal組件可以很方便地實(shí)現(xiàn)頁(yè)面controller與模態(tài)框controller之間通信，特別是彈出的模態(tài)框中有比較復(fù)雜的表格信息需要用戶填寫，下面切入主題： 注冊(cè)全局模態(tài)框?qū)嵗腸ontrolle...

    Jrain 評(píng)論0 收藏0

  • 從 Ionic1 遷移至 Ionic2 基本說明

    摘要：遷移概念是基于之上重寫的全新框架。從遷移雖然應(yīng)用需要對(duì)其語法結(jié)構(gòu)進(jìn)行更新，但是開發(fā)人員仍然可以通過和這兩篇文章來積極的確保升級(jí)工作符合最佳的應(yīng)用實(shí)踐。這可以很容易的讓一個(gè)的控制器遷移為一個(gè)的類。 遷移概念 Ionic 2 是基于 Angular 2 之上重寫的全新框架。所有你已知的關(guān)于的 Angular 的部分仍然存在，但是也有一些作為開發(fā)人員仍要了解的新的語法和結(jié)構(gòu)性變化。關(guān)于 An...

    shevy 評(píng)論0 收藏0

  • [譯] 如何使用 TypeScript 編寫 AngularJS 的 Controller？

    摘要：在這篇文章里，我將介紹如何使用去編寫的。一個(gè)新的子將被創(chuàng)建并作為變量注入到的構(gòu)造函數(shù)當(dāng)中。當(dāng)使用一個(gè)構(gòu)造函數(shù)就可以很好地解決問題，因?yàn)楹瘮?shù)提升起到了很重要的作用。自定義接口類型接著就可以在構(gòu)造器使用參數(shù)獲得強(qiáng)類型和智能支持了。 原文鏈接 : How to write AngularJS controller using TypeScript?原文作者 : Siddharth Pande...

    alphahans 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<