使用controllerAs代替$scope

myshell 发布于2019-08-20 10:19 / 3048人阅读

摘要：我们用查看一下发现确实是这样。而在中，假设我们使用将控制器自身挂载在上，也变为，就不会存在上述的一层层查找的过程。的作用的作用也很好理解也就是将属性绑定到自身上。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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