使用controllerAs代替$scope

myshell 發布于2019-08-20 10:19 / 3049人閱讀

摘要：我們用查看一下發現確實是這樣。而在中，假設我們使用將控制器自身掛載在上，也變為，就不會存在上述的一層層查找的過程。的作用的作用也很好理解也就是將屬性綁定到自身上。

controllerAs做了什么

我們在定義路由時

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

在angular的源代碼中:

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

可以發現angular把控制器的實例作為$scope上以controllerAs的值為名稱的對象屬性上了。
我們用Batarang查看一下

發現確實是這樣。

為什么要使用controllerAs

$scope是基于原型進行繼承的，比如說當我們查找一個user對象時，angular會先查找當前$scope有沒有user，如果沒有的話就繼續往上層$scope查找，直至$rootScope。

而在controllerAs中，假設我們使用controllerAs

UserCtrl as ctrl
angular將控制器自身掛載在$scope上，user也變為ctrl.user，就不會存在上述的一層層查找的過程。在很多情況下，比如在嵌套的路由中，上述$scope基于原型的查找，有時候確實會提供一些便利，但這些都可以用服務來實現，也應該使用服務來實現。

大家在初次接觸angular時一定會被推薦過將所有數據都綁定在$scope的一個對象上（比如$scope.data）來避免一些js中值的復制和對象的引用可能會造成的一些問題（公司里的新人大部分也確實遇到過這類問題），而使用controllerAs后就不需要這一步了，因為人家本來就是。

因為不使用$scope也就不能使用$on,$watch,$emit之類的方法，這些方法本來就應該盡量少用，這樣就可以更好的控制項目中的代碼，當不得不用這類方法時可以參考下面的案例。

便于新人學習，我發現新人對于$scope這個東西往往無法理解，而用controllerAs vm之后，則將vm（view model的簡寫）作為視圖模型則比較好理解。

當必須要使用$watch（$on、$emit、$broadcast）時該怎么做

當出現這種情況時我們可以把$scope當做單純的一種服務來使用，他提供了上述的方法，比如:

function MyCtrl ($scope) {
    var vm = this;
    vm.name = "liulei";
    vm.count = 0;
    $scope.$watch("vm.count", function (newVal, oldVal) {
        vm.count ++;
    });
}

在指令中使用controllerAs

在指令中如果不需要數據綁定時，我們簡單的將scope這個選項設置為true或者{}即可，可當我們需要從外部綁定一個值或者對象到指令中該怎么辦呢？因為我們知道如果用scope選項的話，肯定是綁定到指令的scope對象上的，這里我們直接使用bindToController選項即可，上代碼

"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);
        }
    };
});

結果也是我們想要的結果。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);
        }
    };
});

效果是一樣的。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80082.html

Controller As in Angularjs

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

mo0n1andin 2019-08-19 17:14 評論0 收藏0
angular自定義指令詳解

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

PingCAP 2019-08-20 17:20 評論0 收藏0
如何在angular.js中優雅的使用ui.bootstrap的modal組件

摘要：提供唯一的方法配置。即文件名，在同一個頁面有多個不同業務的模態框的情況下很方便點擊確認按鈕執行的代碼可以從中獲取和字段進一步操作發起請求等點擊取消按鈕執行的代碼 ui.bootstrap的modal組件可以很方便地實現頁面controller與模態框controller之間通信，特別是彈出的模態框中有比較復雜的表格信息需要用戶填寫，下面切入主題：注冊全局模態框實例的controlle...

Jrain 2019-08-22 11:16 評論0 收藏0
從 Ionic1 遷移至 Ionic2 基本說明

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

shevy 2019-08-20 11:34 評論0 收藏0
[譯] 如何使用 TypeScript 編寫 AngularJS 的 Controller？

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

alphahans 2019-08-21 14:14 評論0 收藏0