feat: add ng-show, ng-hide directives

Author: vojtajina

lib/angular.dart

@@ -18,8 +18,10 @@ part 'directives/ng_class.dart';
 part 'directives/ng_cloak.dart';
 part 'directives/ng_click.dart';
 part 'directives/ng_controller.dart';
+part 'directives/ng_hide.dart';
 part 'directives/ng_mustache.dart';
 part 'directives/ng_repeat.dart';
+part 'directives/ng_show.dart';
 part 'dom_utilities.dart';
 part 'exception_handler.dart';
 part 'http.dart';
@@ -141,4 +143,6 @@ angularModule(AngularModule module) {
   module.directive(NgCloakAttrDirective);
   module.directive(NgClickAttrDirective);
   module.directive(NgControllerAttrDirective);
+  module.directive(NgHideAttrDirective);
+  module.directive(NgShowAttrDirective);
 }

lib/directives/ng_hide.dart

@@ -0,0 +1,23 @@
+part of angular;
+
+
+class NgHideAttrDirective {
+  static String NG_HIDE_CLASS = 'ng-hide';
+
+  String expression;
+  dom.Element node;
+
+  NgHideAttrDirective(dom.Node this.node, DirectiveValue value) {
+    expression = value.value;
+  }
+
+  attach(Scope scope) {
+    scope.$watch(expression, (value, _, __) {
+      if (value != null && toBool(value)) {
+        node.classes.add(NG_HIDE_CLASS);
+      } else {
+        node.classes.remove(NG_HIDE_CLASS);
+      }
+    });
+  }
+}

lib/directives/ng_show.dart

@@ -0,0 +1,23 @@
+part of angular;
+
+
+class NgShowAttrDirective {
+  static String NG_SHOW_CLASS = 'ng-show';
+
+  String expression;
+  dom.Element node;
+
+  NgShowAttrDirective(dom.Node this.node, DirectiveValue value) {
+    expression = value.value;
+  }
+
+  attach(Scope scope) {
+    scope.$watch(expression, (value, _, __) {
+      if (value != null && toBool(value)) {
+        node.classes.add(NG_SHOW_CLASS);
+      } else {
+        node.classes.remove(NG_SHOW_CLASS);
+      }
+    });
+  }
+}

test/directives/ng_hide_spec.dart

@@ -0,0 +1,37 @@
+import '../_specs.dart';
+import 'dart:html' as dom;
+
+
+main() {
+  beforeEach(module(angularModule));
+
+  describe('NgHide', () {
+    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 ng-hide class', () {
+      compile('<div ng-hide="isHidden"></div>');
+
+      expect(element).not.toHaveClass('ng-hide');
+
+      rootScope.$apply(() {
+        rootScope['isHidden'] = true;
+      });
+      expect(element).toHaveClass('ng-hide');
+
+      rootScope.$apply(() {
+        rootScope['isHidden'] = false;
+      });
+      expect(element).not.toHaveClass('ng-hide');
+    });
+  });
+}

test/directives/ng_show_spec.dart

@@ -0,0 +1,56 @@
+import '../_specs.dart';
+import 'dart:html' as dom;
+
+
+main() {
+  beforeEach(module(angularModule));
+
+  describe('NgShow', () {
+    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 ng-show class', () {
+      compile('<div ng-show="isVisible"></div>');
+
+      expect(element).not.toHaveClass('ng-show');
+
+      rootScope.$apply(() {
+        rootScope['isVisible'] = true;
+      });
+      expect(element).toHaveClass('ng-show');
+
+      rootScope.$apply(() {
+        rootScope['isVisible'] = false;
+      });
+      expect(element).not.toHaveClass('ng-show');
+    });
+
+    it('should work together with ng-class', () {
+      compile('<div ng-class="currentCls" ng-show="isVisible"></div>');
+
+      expect(element).not.toHaveClass('active');
+      expect(element).not.toHaveClass('ng-show');
+
+      rootScope.$apply(() {
+        rootScope['currentCls'] = 'active';
+      });
+      expect(element).toHaveClass('active');
+      expect(element).not.toHaveClass('ng-show');
+
+      rootScope.$apply(() {
+        rootScope['isVisible'] = true;
+      });
+      expect(element).toHaveClass('active');
+      expect(element).toHaveClass('ng-show');
+    });
+  });
+}