`
v7sky
  • 浏览: 75271 次
文章分类
社区版块
存档分类
最新评论

【AngularJS系列】controller as

阅读更多
比较经典的用法
<div ng-controller="MainController">  
    {{ someObj.someProp }}
</div>  

app.controller('MainController',function ($scope) {
    $scope.someObj = {
        someProp: 'Some value.'
    };
});


使用Controller as后,变成了
<div ng-controller="MainController as main">  
    {{ main.someProp }}
</div>  

app.controller('MainController',function ($scope) {
   this.someProp = 'Some value.'
});


更多的参考:
https://github.com/johnpapa/angular-styleguide 其列举了angularjs的各种推荐写法
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md


更有意义的是,它还可以避免scope的继承,书写更清晰,例如:
子controller可以同步修改父controller的对象,而免去scope继承的问题
<div ng-controller="ParentController as parent">
    ParentController: <input type="text" ng-model="parent.foo" />
    parent.foo: {{ parent.foo }}
    <div ng-controller="ChildController as child">
        ChildController: <input type="text" ng-model="parent.foo" />
        parent.foo: {{ parent.foo }}
    </div>
</div>

app.controller('ParentController', function($scope) {
    this.foo = "bar";
});

app.controller('ChildController',function ($scope) {
});


更多参考:
http://www.tuicool.com/articles/Mfeimu
0
0
分享到:
评论

相关推荐

    《AngularJS: Novice to Ninja》- 2017 英文原版

    Developed and maintained by Google, AngularJS brings the Model-View-Controller (MVC) pattern to JavaScript applications and provides a high quality foundation for building complex and powerful apps ...

    AngularJS (Oreilly英文版)

    This hands-on guide introduces you to AngularJS, the open source JavaScript framework that uses Model–view–controller (MVC) architecture, data binding, client-side templates, and dependency ...

    angularJs by example

    You'll also find information on testing your app with tools such as Jasmine, as well as tips and tricks for some of the most common challenges of developing with AngularJS., AngularJS by Example is a...

    AngularJS by Example (pdf)

    We will cover scenarios such as structuring the app for complex views, inter controller/directive communication, common framework pitfalls, authentication and authorization, code organization for ...

    angular-state-manager:在 AngularJS 中管理状态

    #angular-state-manager 停止 AngularJS 意大利面代码! 取而代之的是: // random variables all over ... // use controllerAs sytnax var vm = this ; // create a new group of "states" vm . states = stateMan

    angularJS结合canvas画图例子

    这里给大家分享一个angularJS结合canvas画图例子,效果非常不错,赞一个先。 代码如下: &lt;!DOCTYPE html&gt; &lt;html ng-app=”APP”&gt; &lt;head&gt;  &lt;meta charset=”UTF-8″&gt;  [removed][removed] &lt;...

    angular-observer-pattern:观察者模式作为 angularJS 的服务

    这是一个角度工厂,它反映了观察者模式,它与 ControllerAs 的工作方法配合得很好,因为它可以比 $scope.$watch 更有效,并且在正确使用时比 $emit 和 $broadcast 更特定于唯一的范围或对象. 用例:您将使用此模式...

    angular-scope-inheritance:测试 AngularJS 范围继承的一些概念

    AngularJS 范围继承 测试 AngularJS 范围继承的一些概念。 - controller语法 - controllerAs语法,等于控制器的名称。 - controllerAs语法,不同的控制器名称。

    AngularJS-complete-starter:AngularJS具有所有良好实践的完整基础应用程序

    ControllerAs语法。 依赖性注入是分开进行的,以实现非破坏性的最小化并提高可读性。 一个单独的app.module.js可以创建主模块并注入依赖项。 在每个模块中都指定了路由。 导航条指令self包含在其自己的文件夹中

    Angular-Chronicle:AngularJS的撤销数据库

    支持用户友好的字符串处理、“controller as”语法和事件函数调用。 这已针对 Angular 1.2.14+ 进行了测试。 已发现低于 1.2.14 的版本无法与 Chronicle 一起使用,并且不受官方支持。安装最简单的安装方法就是使用...

    AngularJS向后端ASP.NET API控制器上传文件

    本文实例介绍了前端AngularJS向后端ASP.NET Web API上传文件的实现方法,具体内容如下 首先服务端: public class FilesController : ApiController { //using System.Web.Http [HttpPost] public async Task...

    angularjs1.5 组件内用函数向外传值的实例

    组件: .component('homeCityListCom',{ bindings: { list: '&lt;', cityname:'&' }, controllerAs: 'vm', template: ` 按拼音首字母选择 &lt;p class=zimu&gt;{{x

    Manning.Angular.in.Action.2018.3.pdf

    Early in its AngularJS days (version 1.x is known as AngularJS), it became perhaps the most popular web application framework of its time. But the 1.x version had lim- itations, and a number of ...

    todo-ng2now:使用 angular2-now 库和 AngularJS 1.3 编码的 ToDo 应用程序

    todo-ng2now ToDo 应用程序使用库和 AngularJS 1.3 和编码。 单击此处查看。 比较 angular2-now 和 Aurelia 在阅读我受到启发,对...angular2now.options({ controllerAs: 'vm' }) angular.module('todo-app',

    模板视图和AngularJS之间冲突的解决方法

    本文实例讲述了模板视图和AngularJS之间冲突的解决方法。分享给大家供大家参考,具体如下: 问题: 在php的mvc视图中,我们需要在加载的过程中 传递一些数据给模板: 如: 这里是某个 controller $data['users'] = ...

    swks-genpoly:Sturdyworks Yoman generator-of-poly 0.4.12 AngularJS 种子项目

    生成的代码非常棒,甚至允许Controller As Syntax,但与所有生成器一样,很多与跨浏览器支持相关的代码都缺失了,而且由于这个项目种子专注于Bootstrap 3.3和Angular UI,一些代码增强用于优化 Windows 8.1、...

    AngularJS使用ng-class动态增减class样式的方法示例

    本文实例讲述了AngularJS使用ng-class动态增减class样式的方法。分享给大家供大家参考,具体如下: 使用ng-class可以实现动态地增减样式: &lt;!DOCTYPE html&gt; &lt;html ng-app="formExample"&gt; &lt;head&gt; &...

    angular-starter:AngularJS的入门项目

    它用: ui路由器IIFE范围界定传递给模块方法的函数,而不是分配为回调的函数controllerAs语法一次性绑定语法欢迎您提供意见和/或建议。安装使用git克隆存储库: git clone ...

    Angular in Action-Manning(2018).pdf

    The concept of two-way databinding (being able to sync data between the controller and the view automatically), which was touted early on as its best feature, became a performance bottleneck in large...

Global site tag (gtag.js) - Google Analytics