wip ng-pseudo

demo/todo/index.html

@@ -24,7 +24,7 @@ <h2>Things To Do ;-)</h2>
     <ul class="well unstyled">
         <li ng-repeat="item in todo.items" ng-class="todo.classFor(item)">
             <label class="checkbox">
-                <input type="checkbox" ng-model="item.done"> {{item.text}}
+                <input type="checkbox" ng-model="item.done"> {{item.text}} <todo-type symbol="?"></todo-type>
             </label>
         </li>
     </ul>

demo/todo/main.dart

@@ -10,6 +10,8 @@ main() {
   print(window.location.search);
   var module = new Module()
     ..type(TodoController)
+    ..type(NgPseudo)
+    ..type(TypeComponent)
     ..type(PlaybackHttpBackendConfig);
 
   // If these is a query in the URL, use the server-backed

demo/todo/todo.css

@@ -47,3 +47,7 @@ p {
   padding-top: 10px;
   padding-bottom: 10px;
 }
+
+li:hover todo-type::x-text {
+    font-weight: bold;
+}

demo/todo/todo.dart

@@ -1,6 +1,7 @@
 library todo;
 
 import 'package:angular/angular.dart';
+import 'dart:html' as dom;
 
 class Item {
   String text;
@@ -91,3 +92,39 @@ class TodoController {
     return items.where((item) => !item.done).length;
   }
 }
+
+@NgDirective(
+  selector: '[ng-pseudo]',
+  map: const { 'ng-pseudo': '@name' }
+)
+class NgPseudo {
+  dom.Element _elt;
+  set name(n) {
+    _elt.pseudo = n;
+  }
+
+  NgPseudo(dom.Element this._elt);
+}
+
+
+@NgComponent(
+  selector: 'todo-type',
+  map: const {
+    'symbol': '@symbol'
+  },
+  template: """<span style=\'border:1px solid black; padding: 0.1em\'>
+      [<span ng-bind="ctrl.symbol" ng-pseudo="x-text" ng-click="ctrl.rotSymbol()"></span>]
+    </span>""",
+  publishAs: 'ctrl'
+)
+class TypeComponent {
+  String symbol;
+  rotSymbol() {
+    switch (symbol) {
+      case '?': return symbol = '!';
+      case '!': return symbol = '#';
+      case '#': return symbol = '*';
+      case '*': return symbol = '?';
+    }
+  }
+}