Skip to content

Instantly share code, notes, and snippets.

@mraleph
Created February 2, 2014 00:16
Show Gist options
  • Save mraleph/8761172 to your computer and use it in GitHub Desktop.
Save mraleph/8761172 to your computer and use it in GitHub Desktop.
<div class="rows">
</div>
import 'dart:html';
import 'package:angular/angular.dart';
@NgComponent(
selector: 'editor',
map: const {
'lines': '=>lines',
'widgets': '=>widgets',
},
templateUrl: 'packages/TryNg/editor.html',
publishAs: 'ed'
)
class EditorComponent extends NgShadowRootAware {
var lines;
var widgets;
Element _root;
EditorComponent(Scope scope) {
// Is this the only way to detect change in the current scope and rerender?
scope.$watchSet(["ed.lines", "ed.widgets"], (oldValues, newValue, scope) {
render();
});
}
onShadowRoot(shadowRoot) {
_root = shadowRoot.querySelector(".rows");
render();
}
// Rendering function builds some DOM depending on both lines and widgets.
// How to fire it other than by watching dependencies manually?
// Is there any Scope.$onAnythingChanged?
render() {
if (_root == null) return;
_root.nodes.clear();
_root.nodes.add(
new Element.html("<table><tr><td>lines</td><td>${lines}</td></tr>"
"<tr><td>widgets</td><td>${widgets}</td></tr></table>")
);
}
}
@NgController(
selector: '[empty-controller]',
publishAs: 'data')
class DataController {
var lines = "1,2,3";
var widgets = "3,4,5";
// Update both.
updateSmth() {
lines += lines;
widgets += widgets;
}
}
class M extends Module {
M() {
type(DataController);
type(EditorComponent);
}
}
main() {
ngBootstrap(module: new M());
}
<!DOCTYPE html>
<html ng-app>
<body>
<div empty-controller>
<button ng-click="data.updateSmth()">Update</button>
<editor lines="data.lines" widgets="data.widgets"></editor>
</div>
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment