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

【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 API常用方法示例

    使用`controllerAs`可以为控制器指定一个别名,以便在视图中引用控制器的属性。 ```javascript app.controller('MyCtrl', function($scope) { this.name = 'World'; }, '$ctrl'); ``` ```html &lt;p&gt;{{ $ctrl.name }...

    angularjs1.4js类库

    2. **ControllerAs语法**:为了更好地遵循面向对象编程的原则,1.4版本推荐使用`controllerAs`语法,将控制器实例绑定到视图的特定作用域变量,使得代码更加清晰和易于理解。 3. **$http服务增强**:$http服务在1.4...

    angularjs指令 下拉框

    controllerAs: 'vm' // 在模板中使用别名vm }; }); ``` 2. **编写模板**:`dropdown.html`将包含HTML结构,如: ```html &lt;select ng-model="vm.selected" ng-options="option.value as option.label for ...

    angularjs学习资料

    4. **最新版更新**:如果你的资料包含AngularJS的最新版本(如AngularJS 1.7或更高),那么可能还会涉及新引入的特性,如$controllerAs语法、ES6集成、以及对Promises的更好支持等。 学习AngularJS的过程中,除了...

    Clip-Two AngularJs-Admin

    "Clip-Two AngularJs-Admin"可能遵循了AngularJS的最佳实践,如使用controllerAs语法、依赖注入注解等,以提高代码质量。 在实际使用中,开发者需要理解并掌握这些核心概念,结合"Clip-Two AngularJs-Admin"提供的...

    angularjs 后台模版

    10. **最佳实践**:为了提高代码可维护性和团队协作,遵循AngularJS的最佳实践至关重要,如使用controllerAs语法,避免使用$scope,以及利用ES6特性等。 "backend-angular"这个文件名可能指的是一个专门针对...

    AngularJS 0006:控制器

    - **使用`controllerAs`语法**:为了避免`$scope`污染和提高可读性,可以使用`controllerAs`语法,将控制器实例绑定到视图的一个变量上。 **六、结合ASP.NET** 在ASP.NET环境中,AngularJS可以与服务器端的MVC或...

    AngularJS精妙绝伦的控制器

    AngularJS 1.2引入了`controllerAs`语法,允许开发者为控制器指定别名,提高代码可读性: ```html &lt;div ng-controller="MyController as ctrl"&gt; {{ ctrl.message }} ``` 在控制器中,`this`关键字指向的就是`...

    angularjs1.6.1

    1.6.1版的控制器依然支持旧的语法,但推荐使用`controllerAs`语法来提高可读性和可维护性。 4. **指令**:指令是AngularJS中强大的特性,它们扩展了HTML的功能,使得我们可以定义自定义的行为。1.6.1版对指令进行了...

    angularjs1.6.2

    在1.6.2版本中,鼓励使用`controllerAs`语法糖和依赖注入来减少作用域污染。 8. **路由**:AngularJS 1.6.2支持uirouter或ngRoute模块,提供URL路由功能,实现页面跳转和视图切换,使SPA应用具有多视图的能力。 9....

    AngularJs 1.5.8

    AngularJS 的创始人之一 Misko Hevery 提倡一系列最佳实践,如使用 Controller As 语法、避免 $scope 污染等,1.5.8 版本很好地支持了这些实践,鼓励开发者编写更高质量的代码。 ### 9. 测试工具 AngularJS 1.5.8 ...

    angularJS基本框架

    - 使用`controllerAs`语法糖,提高代码可读性。 - 利用`ngAnimate`实现动画效果,提升用户体验。 - 遵循DRY(Don't Repeat Yourself)原则,避免代码重复。 - 使用`$scope.$apply()`手动触发脏检查,确保数据...

    requirejs整合angularjs

    在本文中,我们将深入探讨如何将RequireJS与AngularJS整合,以便在Web应用程序中实现高效、模块化的开发。RequireJS是一种流行的JavaScript模块加载器和打包工具,它使得代码组织更加有序,而AngularJS则是一个强大...

    用AngularJS做的静态的增删改查

    10. **最佳实践**:在实际项目中,还需要遵循AngularJS的最佳实践,如使用controllerAs语法、避免在控制器中直接进行DOM操作、以及充分利用指令来封装复杂UI逻辑等。 通过这个"用AngularJS做的静态的增删改查"项目...

    AngularJS入门教程之Select(选择框)详解

    AngularJS是一个流行的前端JavaScript框架,由Google团队开发,用以构建动态Web应用程序。其中,Select(选择框)控件是用户交互中常用的元素之一,它允许用户从一组选项中进行选择。AngularJS通过ng-options指令...

Global site tag (gtag.js) - Google Analytics