如何在服务和控制器之间进行双向数据绑定 [英] How to make two-way data binding between service and controller
问题描述
我有一个服务，我一直在尝试对控制器内该服务的属性之一进行双向绑定.下面是三种不同方法的代码.第一个使用$watch()，第二个使用getter/setter，第三个使用带有@NgTwoWay -binding的属性.
I have a service and I have been trying to make a two-way binding to one of the service's properties within controller. Below is a code for three different approaches. The first uses $watch(), the second uses getter/setter and the third uses attribute with @NgTwoWay-binding.
我认为第三个是最干净的解决方案，但是可以在没有包装控制器(test-ctrl)的情况下编写代码吗?
I think the third one is the cleanest solution, but is it possible to write the code without the wrapper controller (test-ctrl)?
是否有更好的绑定方法?
Is there a better way to do the binding?
ang.dart
import 'package:angular/angular.dart';
@NgController(selector: '[my-ctrl]', publishAs: 'ctrl')
class MyCtrlController {
String strMsg;
var serv;
MyCtrlController(MyService myS, Scope _scope) {
_scope.$watch(() => myS.message, (value) => strMsg = value);
_scope.$watch(() => strMsg, (value) => myS.message = value);
}
}
@NgController(selector: '[my-ctrl2]', publishAs: 'ctrl')
class MyCtrl2Controller {
String _strMsg2;
set strMsg2(String s) {
_strMsg2 = s;
serv.message = s;
}
String get strMsg2 {
_strMsg2 = serv.message;
return _strMsg2;
}
var serv;
MyCtrl2Controller(MyService myS) {
serv = myS;
strMsg2 = myS.message;
}
}
@NgController(selector: '[my-ctrl3]', publishAs: 'ctrl')
class MyCtrl3Controller {
@NgTwoWay('message3')
String message3;
}
@NgController(selector: '[test-ctrl]', publishAs: 'testctrl')
class TestCtrlController {
var serv;
TestCtrlController(MyService myS) {
serv=myS;
}
}
class MyService {
String message = 'blue';
}
class MyAppModule extends Module {
MyAppModule() {
type(MyCtrlController);
type(MyCtrl2Controller);
type(MyCtrl3Controller);
type(TestCtrlController);
type(MyService);
}
}
void main() {
ngBootstrap(module: new MyAppModule());
}
ang.html
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-model test</title>
<link rel="stylesheet" href="ang.css">
</head>
<body>
<div my-ctrl>
<p>controller1: <input type="text" ng-model="ctrl.strMsg"></p>
<p>Message1 is {{ctrl.strMsg}}</p>
</div>
<div my-ctrl2>
<p>controller2: <input type="text" ng-model="ctrl.strMsg2"></p>
<p>Message2 is {{ctrl.strMsg2}}</p>
</div>
<div test-ctrl>
<div my-ctrl3 message3="testctrl.serv.message">
<p>controller3: <input type="text" ng-model="ctrl.message3"></p>
<p>Message3 is {{ctrl.message3}}</p>
</div>
</div>
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="ang.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
推荐答案
恕我直言，最好的方法是第二个版本的精简版:
IMHO the best way is a strip-down version of your second variation:
@NgController(selector: '[my-ctrl2]', publishAs: 'ctrl')
class MyCtrl2Controller {
var service;
MyCtrl2Controller(MyService this.service) {
}
set strMsg2(String s) {
service.message = s;
}
String get strMsg2 {
return service.message;
}
}
希望有帮助；-)
这篇关于如何在服务和控制器之间进行双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
