[AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers
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 thoughtram which 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进阶(五)Angular实现下拉菜单多选
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- 前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
- 关于 Angular HTTP Interceptor 中 Request 和 Response 的 immutable 特性
- 前端人员该怎么面试 经典Angular面试题有哪些[通俗易懂]
- 前端面试题angular_Vue前端面试题
- To add browser notifications to an online customer support live chat service system - gofly - self h
- 基于 Spartacus 的 Angular Storefront 性能优化建议
- ECC TO HANA FAGLB03 search-help on Account Number field doesn’t working or not returning the selected value to the Account Number field.详解编程语言
- angular简介和其特点介绍