Question

我有一个服务，我一直在尝试与控制器中的一个服务属性进行双向绑定。以下是三种不同方法的代码。第一个使用$watch()，第二个使用getter / setter，第三个使用@NgTwoWay - 绑定属性。

我认为第三个是最干净的解决方案，但是可以在没有包装器控制器（test-ctrl）的情况下编写代码吗？

有没有更好的方法来进行绑定？

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>

Answer 1

恕我直言，最好的方法是第二种变体的精简版：

@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;
  }

}

希望它有所帮助; - ）

如何在服务和控制器之间进行双向数据绑定

1 个答案: