The post we have: http://www.cnblogs.com/Answer1215/p/4185504.html gives a breif introduce about bindToController on the directive.

Here is a blog about bindToController from thoughtramwhich explains in detail why bingToController comes into handy and why controllerAs syntax is important.

Here is the part which useful to myself

This is a directive with an isolated scope that defines how its scope properties are bound. Alright, let’s say we have directive with an isolated scope, a controller and a template that uses the controller properties accordingly:

app.directive('someDirective', function () {
return {
scope: {},
controller: function () {
this.name = 'Pascal'
},
controllerAs: 'ctrl',
template: '<div>{{ctrl.name}}</div>'
};
});

Easy. That works and we knew that already. Now to the tricky part: what ifname should be two-way bound?

app.directive('someDirective', function () {
return {
scope: {
name: '='
},
// ...
};
});

Changes to isolated scope properties from the outside world are not reflected back to the controllers’ this object. What we need to do to make this work in 1.2, is to use the $scope service to re-assign our scope values explicitly, whenever a change happens on a particular property. And of course, we mustn’t forget to bind our watch callback to the controllers’ this:

app.directive('someDirective', function () {
return {
scope: {
name: '='
},
controller: function ($scope) {
this.name = 'Pascal'; $scope.$watch('name', function (newValue) {
this.name = newValue;
}.bind(this));
},
// ...
};
});

Here we go… the $scope service we initially got rid off is now back. If you now think this is crazy, especially when considering that this is just one scope property and in a real world directive you usually have more than one, then my friend, I agree with you.

Luckily, this is no longer a problem in Angular 1.3!

app.directive('someDirective', function () {
return {
scope: {
name: '='
},
controller: function () {
this.name = 'Pascal';
},
controllerAs: 'ctrl',
bindToController: true,
template: '<div>{{ctrl.name}}</div>'
};
});

[AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers的更多相关文章

  1. [译]Exploring Angular 1.3: Binding to Directive Controllers

    原文: http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html Angul ...

  2. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

  3. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  4. 【js类库AngularJs】解决angular+springmvc的post提交问题

    [js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...

  5. 来自 Thoughtram 的 Angular 2 系列资料

    Angular 2 已经正式 Release 了,Thoughtram 已经发布了一系列的文档,对 Angular 2 的各个方面进行深入的阐释和说明. 我计划逐渐将这个系列翻译出来,以便对大家学习 ...

  6. [AngularJS] Using the Angular scope $destroy event and method

    With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. Th ...

  7. [AngularJS] Lazy loading Angular modules with ocLazyLoad

    With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...

  8. [AngularJS] New in Angular 1.3 - Performance Boost with debugInfoEnabled

    By default, Angular provides a lot of debug information on the DOM that's only necessary for tools l ...

  9. [AngularJS] New in Angular 1.5 ng-animate-swap

    <!DOCTYPE html> <html ng-app="MyApplication"> <head> <link rel=" ...

随机推荐

  1. VBSCRIPT事件绑定(隐式)

    很多新版的浏览器都开始不支持VBSCRIPT 所以系统开始不断地有script错误,开始比较多地接触VBSCRIPT vbscript 和javascript 事件绑定的类似方法为 vbscript: ...

  2. mysql 读取硬盘数据

    innodb 的最小管理单位是页 innodb的最小申请单位是区,一个区 1M,内含64个页,每个页16K ,即 64*16K=1M, 考虑到硬盘局部性,每次读取4个区,即读4M的数据加载至内存 线性 ...

  3. Access增删改查 (持续更新中)

    关于Access数据库(2003)的增删改查,其实和Sql大体差不多,但是还有很多不一样的地方.下面列几个容易犯的错误:  1.Access数据库的位置: conn = new OleDbConnec ...

  4. poj2135

    加深对最小费用最大流的理解题 题目求无向图来回和最短的路径,每条边只能走一次 不难想到,无向图中来回等于从源点出发走两条不同路径到汇点(区别于k短路,这里每条边只能走一次): 考虑到边的限制,不难想到 ...

  5. poj12月其他题解(未完)

    最近编程的时间比较少啊…… poj3253 就是个合并果子,各种优先队列即可(显然单调队列最优) poj3263 线段树统计每个点被覆盖了多少次即可,注意要去重 poj3625 最小生成树 poj36 ...

  6. uva753 A Plug for UNIX

    最大流. 流可以对应一种分配方式. 显然最大流就可以表示最多匹配数 #include<cstdio> #include<algorithm> #include<cstri ...

  7. ,net运行框架

    .NET FrameWork框架 是一套应用程序开发框架,主要目的提供一个开发模型. 主要的两个组件: 公共语言运行时(Common Language Runtime)(CLR): 提供内存管理.线程 ...

  8. xss(跨站脚本攻击),crsf(跨站请求伪造),xssf

    我们常说的网络安全其实应该包括以下三方面的安全: 1.机密性,比如用户的隐私被窃取,帐号被盗,常见的方式是木马. 2.完整性,比如数据的完整,举个例子,康熙传位十四子,被当时四阿哥篡改遗诏:传位于四子 ...

  9. (七)学习CSS之filter属性

    filter: alpha(opacity=,finishopacity=,style=)??? alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopa ...

  10. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.3.6

    If $A$ is a contraction, show that $$\bex A^*(I-AA^*)^{1/2}=(I-A^*A)^{1/2}A^*. \eex$$ Use this to sh ...