角镖:从外面操纵控制器时,数据绑定不起作用(Angular Dart: Data binding d

2019-10-20 09:13发布

我有相互嵌套的两个控制器。 外控制器显示/通过使用隐藏内部控制器ng-switch指令。

外控制器还包含一个复选框。 如果该复选框被选中,则所述内控制器变得可见(通过上述ng-switch指令)。 该复选框按预期工作。

还有控制器的“开放式”的链接。 它onclick处理程序调用到外部控制器应该通过模型来检查的复选框。 问题是,即使模型得到改变,认为没有更新。

这种模式完美地工作在AngularJS但显然不会在AngularDart。 我假设达特区的罪魁祸首(其中我完全无能在这一点)。

我坚持这种模式或类似的东西,因为我在整合AngularDart到不使用数据绑定,所以我就去触发模式外模式变化的遗留应用程序的过程很。

依靠你的智慧极限,在此先感谢!

<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>

Answer 1:

用飞镖1.5.1和AngularDart 0.12.0工程

我只初始化shouldShowInnerController布尔

<!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: Data binding doesn't work when manipulating the controller from the outside