Angular Dart: привязка данных не работает при манипулировании контроллером извне

У меня есть два контроллера, вложенных друг в друга. Внешний контроллер показывает / скрывает внутренний контроллер с помощью 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>
Источник

1 ответ

Решение

Работает с Dart 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>
Источник
Другие вопросы по тегам