feat: add ng-if directive

This is very initial version, that only removes the element (block) from the DOM. It does not detach the scope and therefore it is still digested.

Misko is changing this completely (removing atach/detach API), so I will implement this once Misko is done.

Author: vojtajina

lib/angular.dart

@@ -19,6 +19,7 @@ part 'directives/ng_click.dart';
 part 'directives/ng_cloak.dart';
 part 'directives/ng_controller.dart';
 part 'directives/ng_hide.dart';
+part 'directives/ng_if.dart';
 part 'directives/ng_mustache.dart';
 part 'directives/ng_repeat.dart';
 part 'directives/ng_show.dart';
@@ -143,6 +144,7 @@ angularModule(AngularModule module) {
   module.directive(NgCloakAttrDirective);
   module.directive(NgControllerAttrDirective);
   module.directive(NgHideAttrDirective);
+  module.directive(NgIfAttrDirective);
   module.directive(NgRepeatAttrDirective);
   module.directive(NgShowAttrDirective);
 }

lib/directives/ng_if.dart

@@ -0,0 +1,39 @@
+part of angular;
+
+
+class NgIfAttrDirective {
+  static String $transclude = 'element';
+
+  String expression;
+  dom.Element node;
+  Injector injector;
+  BlockList blockList;
+
+  NgIfAttrDirective(DirectiveValue value, Injector this.injector, BlockList this.blockList, dom.Node this.node) {
+    expression = value.value;
+  }
+
+  attach(Scope scope) {
+    // TODO(vojta): detach the scope when block is removed
+    var childScope = scope.$new();
+    var block = blockList.newBlock();
+    var isInserted = false;
+
+    block.attach(childScope);
+
+    scope.$watch(expression, (value, _, __) {
+      // TODO(vojta): ignore changes like null -> false
+      if (value != null && toBool(value)) {
+        if (!isInserted) {
+          block.insertAfter(blockList);
+          isInserted = true;
+        }
+      } else {
+        if (isInserted) {
+          block.remove();
+          isInserted = false;
+        }
+      }
+    });
+  }
+}

test/directives/ng_if_spec.dart

@@ -0,0 +1,37 @@
+import '../_specs.dart';
+import 'dart:html' as dom;
+
+
+main() {
+  beforeEach(module(angularModule));
+
+  describe('NgIf', () {
+    var compile, element, rootScope;
+
+    beforeEach(inject((Scope scope, Compiler compiler) {
+      compile = (html, [applyFn]) {
+        element = $(html);
+        rootScope = scope;
+        compiler(element)(element).attach(scope);
+        scope.$apply(applyFn);
+      };
+    }));
+
+
+    it('should add/remove the element', () {
+      compile('<div><span ng-if="isVisible">content</span></div>');
+
+      expect(element.find('span').html()).toEqual('');
+
+      rootScope.$apply(() {
+        rootScope['isVisible'] = true;
+      });
+      expect(element.find('span').html()).toEqual('content');
+
+      rootScope.$apply(() {
+        rootScope['isVisible'] = false;
+      });
+      expect(element.find('span').html()).toEqual('');
+    });
+  });
+}