Angular Dart:从外部操作控制器时数据绑定不起作用
[英] Angular Dart: Data binding doesn't work when manipulating the controller from the outside
本文介绍了Angular Dart:从外部操作控制器时数据绑定不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个相互嵌套的控制器.外部控制器使用 ng-switch 指令显示/隐藏内部控制器.
外部控制器还包含一个复选框.如果选中此复选框，则内部控制器可见(通过上述 ng-switch 指令).此复选框按预期工作.
在控制器之外还有一个打开"链接onclick 处理程序调用外部控制器，并应该通过模型检查复选框.问题是即使模型改变了，视图也不会更新.
这种模式在 AngularJS 中完美运行，但在 AngularDart 中显然不行.我假设 Dart 区域是罪魁祸首(目前我对此完全一无所知).
我坚持使用这种模式或类似的模式，因为我正在将 AngularDart 集成到不使用数据绑定的遗留应用程序中，因此我必须从模型外部触发模型更改.
依靠你的终极智慧，提前感谢！
<头><title>Angular.dart 嵌套控制器</title><身体><a href="#" id="open">open</a><div 外部控制器 ng-switch="outerCtrl.shouldShowInnerController"><input type="checkbox" ng-model="outerCtrl.shouldShowInnerController"><div 内部控制器 ng-switch-when="true">你的名字:
<脚本类型=应用程序/dart">导入飞镖:html"；导入'包:角度/角度.dart';导入'包:角度/application_factory.dart'；外部控制器外部控制器；@Controller(selector:'[outer-controller]', publishAs:'outerCtrl')类外控制器{bool shouldShowInnerController;静态作用域范围；外控制器(范围_范围){范围 = _scope;外层控制器 = 这个；}无效 showOuterController() {shouldShowInnerController = true;范围.应用()；}}@Controller(selector:'[inner-controller]', publishAs:'innerCtrl')类内部控制器{String yourName = 'defaultName';}类 MyAppModule 扩展模块 {我的应用模块(){类型(内部控制器)；类型(外部控制器)；}}主要的() {applicationFactory().addModule(new MyAppModule()).run();querySelector('#open').onClick.listen((事件事件){外层控制器.showOuterController();});}</html>
解决方案
适用于 Dart 1.5.1 和 AngularDart 0.12.0
我只初始化了 shouldShowInnerController 布尔值
<头><title>Angular.dart 嵌套控制器</title><身体><a href="#" id="open">open</a><div 外部控制器 ng-switch="outerCtrl.shouldShowInnerController"><input type="checkbox" ng-model="outerCtrl.shouldShowInnerController"><div 内部控制器 ng-switch-when="true">你的名字:
<脚本类型=应用程序/dart">导入飞镖:html"；导入'包:角度/角度.dart';导入'包:角度/application_factory.dart'；外部控制器外部控制器；@Controller(selector:'[outer-controller]', publishAs:'outerCtrl')类外控制器{bool shouldShowInnerController = false;静态作用域范围；外控制器(范围_范围){范围 = _scope;外层控制器 = 这个；}无效 showOuterController() {shouldShowInnerController = !shouldShowInnerController;范围.应用()；}}@Controller(selector:'[inner-controller]', publishAs:'innerCtrl')类内部控制器{String yourName = 'defaultName';}类 MyAppModule 扩展模块 {我的应用模块(){类型(内部控制器)；类型(外部控制器)；}}主要的() {applicationFactory().addModule(new MyAppModule()).run();querySelector('#open').onClick.listen((事件事件){外层控制器.showOuterController();});}</html>
I have two controllers nested into each other. The outer controller shows/hides the inner controller by using an ng-switch directive.
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.
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.
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).
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>
解决方案
Works with Dart 1.5.1 and AngularDart 0.12.0
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>
这篇关于Angular Dart:从外部操作控制器时数据绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
