如何使用新的controllerAs语法和面向对象的控制器获得两种方式绑定以在Angular中工作? [英] How do I get two way binding to work in Angular with new controllerAs syntax and Object Oriented Controllers?
问题描述
我担心范围汤,人们在$ scope上悬挂了太多功能。因此,我正在尝试面向对象的控制器,新的controllerAs并在控制器中使用EC5样式的getter / setter方法。这很不错,但是现在我想将指令的作用域与控制器的作用域绑定两种方式,并且无法按我期望的那样工作。我已创建此codePen来显示它。
I am fearful of "scope soup", people hanging too much functionality off the $scope. So I am experimenting with OO oriented controllers, the new controllerAs and using EC5 style getter / setters in my controller. That is working sweet, but now I want to bind my directive's scope to my controller's scope two way, and it isn't working as I expect. I have created this codePen to show it.
http://codepen.io/anon/pen/DlfxB?editors=101
我希望这行有效:
scope: { pants: '='},
推荐答案
您可以使用 bindToController
选项(如果您使用的是1.3 rc版本),则需要在控制器上绑定2种方式绑定的范围变量。否则,您将只需要手动将属性映射到控制器实例(这很痛苦),或者仅将常规语法(不带控制器)用于2种方式绑定的属性。因此,您可以执行'< h1> {{my.pants}}-myDirective.pants = {{my.pants}}< / h1>< input ng-model = my.pants >'
在指令配置中带有 bindToController:true
。
You can use bindToController
option if you are in 1.3 rc version, to have the 2 way bound scope variables to be bound on the controller. Otherwise you would have to just manually map the properties to controller instance (Which is a pain) or just use regular syntax (without controller.) for 2 way bound properties. So you could do '<h1>{{my.pants}} - myDirective.pants = {{ my.pants }}</h1><input ng-model="my.pants">'
with bindToController:true
in the directive configuration.
bindToController
- 将隔离范围用于组件时(请参见上文),并且<使用code> controllerAs 时,
bindToController
- 允许组件绑定其属性到控制器,而不是范围。实例化控制器
- 时,隔离范围绑定的初始值已可用。
bindToController
- When an isolate scope is used for a component (see above), and
controllerAs
is used,bindToController
will- allow a component to have its properties bound to the controller, rather than to scope. When the controller
- is instantiated, the initial values of the isolate scope bindings are already available.
(function(){
var myApp = angular.module('plunker', []);
var helloEC5 = function(){
this.pants = "jeans";
};
helloEC5.prototype = {
firstName: 'Seeya',
lastName: 'Latir',
get fullName() {
return this.firstName + ' ' + this.lastName;
},
set fullName (name) {
var words = name.toString().split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
};
myApp.controller('HelloEC5', helloEC5);
myApp.directive('myDirective', function () {
return {
scope: { pants: '='},
controllerAs: 'my',
controller: function(){},
bindToController:true,
template: '<h1>{{my.pants}} - myDirective.pants = {{ my.pants }}</h1><input ng-model="my.pants">'
}
});
})();
<script data-require="angular.js@1.3.0-rc.1" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>
<div ng-app="plunker">
<div ng-controller="HelloEC5 as EC5">
<p>HelloEC5 says my name is: {{EC5.fullName}} wearing {{EC5.pants}}!</p>
<label>Pants:</label>
<input ng-model="EC5.pants" type="text" />
<label>FirstName:</label>
<input ng-model="EC5.firstName" type="text" />
<div my-directive="" pants="EC5.pants"></div>
<hr />
<label>Setting HelloEC5.fullName:</label>
<input ng-model="EC5.fullName" />
</div>
</div>
这篇关于如何使用新的controllerAs语法和面向对象的控制器获得两种方式绑定以在Angular中工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!