角度飞镖：从外部操纵控制器时，数据绑定不工作 [英] Angular Dart: Data binding doesn't work when manipulating the controller from the outside
问题描述
我有两个控制器互相嵌套。外部控制器通过使用 ng-switch 指令显示/隐藏内部控制器。
I have two controllers nested into each other. The outer controller shows/hides the inner controller by using an ng-switch directive.
复选框。如果这个复选框被选中，内部控制器是可见的（通过上面的 ng-switch 指令）。此复选框按预期工作。
The outer controller also contains a checkbox. If this checkbox gets checked then the inner controller is made visible (via the above ng-switch directive). This checkbox works as intended.
控制器之外还有一个开放链接 。它的 onclick 处理器调用到外部控制器，并且应该通过模型检查复选框。问题是，即使模型被改变，视图也不会被更新。
There's also an "open" link outside the controllers. Its onclick handler calls into the outer controller and is supposed to check the checkbox via the model. The problem is that even though the model gets changed, the view doesn't get updated.
这种模式在AngularJS中工作正常，但显然不在AngularDart。我假设Dart区域是罪魁祸首（其中我在这一点上完全无知）。
This pattern has worked flawlessly in AngularJS but apparently doesn't in AngularDart. I'm assuming that Dart zones are the culprit (of which I'm completely clueless about at this point).
我坚持这种模式或类似的东西，因为我'在将AngularDart集成到不使用数据绑定的遗留应用程序的过程中，我必须从模型外部触发模型更改。
I insist to this pattern or something similar because I'm in the process of integrating AngularDart into a legacy application that doesn't use data binding so I have to trigger model changes from outside the models.
依靠你的终极智慧，请提前感谢！
Relying on your ultimate wisdom, thanks in advance!
<html ng-app>
<head>
<title>Angular.dart nested controllers</title>
</head>
<body>
<a href="#" id="open">open</a>
<div outer-controller ng-switch="outerCtrl.shouldShowInnerController">
<input type="checkbox" ng-model="outerCtrl.shouldShowInnerController">
<div inner-controller ng-switch-when="true">
Your name: <input ng-model="innerCtrl.yourName">
<br>
Hello {{innerCtrl.yourName}}!
</div>
</div>
<script type="application/dart">
import "dart:html";
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
OuterController outerController;
@Controller(selector:'[outer-controller]', publishAs:'outerCtrl')
class OuterController {
bool shouldShowInnerController;
static Scope scope;
OuterController(Scope _scope) {
scope = _scope;
outerController = this;
}
void showOuterController() {
shouldShowInnerController = true;
scope.apply();
}
}
@Controller(selector:'[inner-controller]', publishAs:'innerCtrl')
class InnerController {
String yourName = 'defaultName';
}
class MyAppModule extends Module {
MyAppModule() {
type(InnerController);
type(OuterController);
}
}
main() {
applicationFactory().addModule(new MyAppModule()).run();
querySelector('#open').onClick.listen((Event event) {
outerController.showOuterController();
});
}
</script>
</body>
</html>
推荐答案
适用于Dart 1.5.1和AngularDart 0.12.0
Works with Dart 1.5.1 and AngularDart 0.12.0
我只初始化了shouldShowInnerController boolean
I have only initialized the shouldShowInnerController boolean
<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular.dart nested controllers</title>
</head>
<body>
<a href="#" id="open">open</a>
<div outer-controller ng-switch="outerCtrl.shouldShowInnerController">
<input type="checkbox" ng-model="outerCtrl.shouldShowInnerController">
<div inner-controller ng-switch-when="true">
Your name: <input ng-model="innerCtrl.yourName">
<br>
Hello {{innerCtrl.yourName}}!
</div>
</div>
<script type="application/dart">
import "dart:html";
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
OuterController outerController;
@Controller(selector:'[outer-controller]', publishAs:'outerCtrl')
class OuterController {
bool shouldShowInnerController = false;
static Scope scope;
OuterController(Scope _scope) {
scope = _scope;
outerController = this;
}
void showOuterController() {
shouldShowInnerController = !shouldShowInnerController;
scope.apply();
}
}
@Controller(selector:'[inner-controller]', publishAs:'innerCtrl')
class InnerController {
String yourName = 'defaultName';
}
class MyAppModule extends Module {
MyAppModule() {
type(InnerController);
type(OuterController);
}
}
main() {
applicationFactory().addModule(new MyAppModule()).run();
querySelector('#open').onClick.listen((Event event) {
outerController.showOuterController();
});
}
</script>
</body>
</html>
这篇关于角度飞镖：从外部操纵控制器时，数据绑定不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
