如何在服务和控制器之间进行双向数据绑定 | 如何在服务和控制器之间进行双向数据绑定
本文介绍了如何在服务和控制器之间进行双向数据绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述 我有一个服务，我一直在尝试对控制器中的一个服务属性进行双向绑定.下面是三种不同方法的代码.第一个使用 $watch()，第二个使用 getter/setter，第三个使用带有 @NgTwoWay 绑定的属性.
我认为第三个是最干净的解决方案，但是是否可以在没有包装控制器(test-ctrl)的情况下编写代码?
有没有更好的方法来进行绑定?
ang.dart
import 'package:angular/angular.dart';@NgController(选择器:'[my-ctrl]'，publishAs:'ctrl')类 MyCtrlController {字符串 strMsg;无功服务；MyCtrlController(MyService myS, Scope _scope) {_scope.$watch(() => myS.message, (value) => strMsg = value);_scope.$watch(() => strMsg, (value) => myS.message = value);}}@NgController(选择器:'[my-ctrl2]'，publishAs:'ctrl')类 MyCtrl2Controller {字符串 _strMsg2;设置 strMsg2(String s) {_strMsg2 = s;serv.message = s;}字符串获取 strMsg2 {_strMsg2 = serv.message;返回_strMsg2；}无功服务；MyCtrl2Controller(MyService myS) {服务= myS;strMsg2 = myS.message;}}@NgController(选择器:'[my-ctrl3]'，publishAs:'ctrl')类 MyCtrl3Controller {@NgTwoWay('message3')字符串 message3;}@NgController(选择器:'[test-ctrl]'，publishAs:'testctrl')类 TestCtrlController {无功服务；TestCtrlController(MyService myS) {服务=我的；}}类我的服务{字符串消息 = '蓝色';}类 MyAppModule 扩展模块 {我的应用模块(){类型(MyCtrlController)；类型(MyCtrl2Controller)；类型(MyCtrl3Controller)；类型(TestCtrlController)；类型(我的服务)；}}无效主(){ngBootstrap(module: new MyAppModule());}ang.html
<头><meta charset="utf-8"><title>ng-model test</title><link rel="stylesheet" href="ang.css"><身体><div my-ctrl><p>controller1:<input type="text" ng-model="ctrl.strMsg"></p><p>Message1 是 {{ctrl.strMsg}}</p><div my-ctrl2><p>controller2:<input type="text" ng-model="ctrl.strMsg2"></p><p>Message2 是 {{ctrl.strMsg2}}</p>
<div test-ctrl><div my-ctrl3 message3="testctrl.serv.message"><p>controller3:<input type="text" ng-model="ctrl.message3"></p><p>Message3 是 {{ctrl.message3}}</p>
<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>
解决方案
恕我直言，最好的方法是您的第二个变体的精简版本:
@NgController(selector: '[my-ctrl2]', publishAs: 'ctrl')类 MyCtrl2Controller {无功服务；MyCtrl2Controller(MyService this.service) {}设置 strMsg2(String s) {service.message = s;}字符串获取 strMsg2 {返回 service.message;}}希望它有帮助;-)
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.
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;
}
}
Hope it helps ;-)
这篇关于如何在服务和控制器之间进行双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-20 09:19