mondalaci/AngularDartNestedControllers.html

## AngularDartNestedControllers.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;
        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>
	<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>