Merge branch 'ui-template-fixes' of git://github.com/dandoyon/angular-ui

Dean Sofer · Dean Sofer · commit 3c5c34831c0e · 2012-07-24T03:05:26.000-07:00
diff --git a/templates/README.md b/templates/README.md
@@ -1,50 +1,34 @@
 # ui-template directives
 
-These directives are boilerplates for creating your own directives. 
+These are boilerplates for creating filters and directives. They use uiConfig so that you can globally assign config options (see uiConfig doc). 
+Currently there are only two templates, one for filter and one for directive along with simple a implementation of each.
 
 ## Usage
 
-Load the script file: template.js in your application:
-
-    <script type="text/javascript" src="modules/directives/template/src/template.js"></script>
-
-Add the template module as a dependency to your application module:
-
-    var myAppModule = angular.module('MyApp', ['ui.directives.template'])
-
-Apply the directive to your html elements:
-
-    <span ui-template num="SomeNumber"></span>
-
-Default styles are in angular-ui.css and are pretty boring, you could just override these in your
-stylesheet and make things more interesting
-
-### Options
-
-All the options can be passed through the directive or set on the html element. 
-NOTE: attributes override controller options
-
-	myAppModule.controller('MyController', function($scope) {
-	    $scope.SomeNumber = 123;
-		$scope.uiTemplateOptions = {
-
-		};
-	});
-
-    // two-way binding with default for scoped.options uiTemplateOptions
-    <span ui-template ng-model="SomeNumber"></span> 
-    
-    // one way binding with your own name for scoped options
-    <span ui-template options="myOptions" num="SomeNumber"></span>
-    
-
-### Notes
-
-ui-template
-    - one-way binding unless you have in an ng-repeat
-    - does not currently work with ng-model. 
-    - is supported only for attribute style elements
-    
-### Todo
-    - support ng-model
-    
+Here's how the two template impls could be used
+<html> 
+    <head>
+        <!-- your angular and other library imports here -->
+        <script>
+        // create global prefix/suffix for elements using wrap filter
+        var myApp = angular.module('myApp',['ui'])
+            .value('ui.config', { 'directiveTmpl': { 'somedirectiveopt' : 'myval' } });
+         
+        function MyCtrl($scope) {
+            $scope.mymodel = "a value";
+        } 
+        </script>
+
+    </head>
+
+    <body ng-controller="MyCtrl">
+        <div>
+            <span>{{mymodel | filterTmpl}}</span>
+
+            <span ui-directive-template ng-model="mymodel"></span>
+            <ui-directive-template ng-model="mymodel"></ui-directive-template>
+            
+        </div>
+    </body>
+
+</html>
diff --git a/templates/src/template.js b/templates/src/template.js
diff --git a/templates/stylesheets/template.less b/templates/stylesheets/template.less
@@ -1 +1,2 @@
-/* ui-template */
+/* default styles (if any) for your directive implementations */
+
diff --git a/templates/template.js b/templates/template.js
@@ -0,0 +1,46 @@
+/*
+* Filter/directive templates
+*/
+angular.module('ui.filters')
+  .filter('filterTmpl', ['ui.config', function(uiConfig) { 
+    var config = { 'somefilteropt' : 'foo'};
+    if (uiConfig.filterTmpl) {
+      angular.extend(config, uiConfig.filterTmpl); 
+    }
+    return function (value, kind) {
+      var opts = {}, inputs = {}, out;
+      // if an input is given then override
+      if(kind) {
+        inputs = {'kind' : kind };
+      }
+      angular.extend(opts, config, inputs);
+      //
+      // do something more interesting to input value here
+      //
+      out = value;
+      return out;
+    };
+  }]);
+
+angular.module('ui.directives')
+  .directive('uiDirectiveTmpl', ['ui.config', function(uiConfig) {
+    var config = { 'somedirectiveopt' : 'bar' };
+    if (uiConfig.directiveTmpl) {
+      angular.extend(config, uiConfig.directiveTmpl); 
+    }
+    return {
+      restrict: 'EAC', // supports using directive as element, attribute and class
+      require: 'ngModel', // requires ng-model controller so we get the two-way binding  
+      link: function(scope, element, attrs, ngModel) {
+        var opts = {}; // instance-specific options
+
+        // build up our options
+        angular.extend(opts, config, scope.$eval(attrs.uiTmpl)); // element attributes that override default options
+
+        // override the controllers render function and do something interesting in here
+        ngModel.$render = function() {
+          element.text(ngModel.$viewValue); // boring
+        };
+      }
+    };
+  }]);
diff --git a/templates/test/templateSpec.js b/templates/test/templateSpec.js
@@ -1,43 +1,70 @@
-describe('uiTemplate', function() {
-  var scope;
-  scope = null;
+/*
+ * sample unit testing for sample templates and implementations
+*/
+describe('uiTemplates', function() {
+
+  // declare these up here to be global to all tests
+  var $rootScope, $compile;
+
+  // override uiConfig for testing purposes, this definition will clobber anything already predefined ... so be careful
+  angular.module('ui.config', [])
+    .value('ui.config', {
+      'filterTmpl' : { 'somefilteropt' : 'foo' },
+      'directiveTmpl' : { 'somedirectiveopt' : 'bar' }
+    });
+
   beforeEach(module('ui.directives'));
-  beforeEach(inject(function($rootScope) {
-    scope = $rootScope.$new();
+  beforeEach(module('ui.filters'));
+
+  // inject in angular constructs. Injector knows about leading/trailing underscores and does the right thing
+  // otherwise, you would need to inject these into each test
+  beforeEach(inject(function(_$rootScope_, _$compile_, _$filter_) {
+	  $rootScope = _$rootScope_;
+    $compile = _$compile_;
   }));
-  describe('use on a div element with two-way binding', function() {
-    it('(two-way) should render MODELVAL in template ', function() {
-      inject(function($compile) {
-        var element;
-        element = $compile("<div ui-template ng-model='mymodel'></div>")(scope);
-        scope.$apply(function() {
-          scope.mymodel = 'MODELVAL';
-        });
-        expect(element.text()).toEqual('MODELVAL');
+  
+  describe('filter tests', function() {
+
+	  // we're doing filter tests so globally define here for this subset of tests
+	  var $filter;
+	  beforeEach(inject(function(_$filter_) {
+	      $filter = _$filter_;
+	  }));
+	  
+    // very simple boilerplate setup of test for a custom filter
+    describe('filterTmpl should', function() {
+      var tmpl;
+      beforeEach(function() {
+        tmpl = $filter('filterTmpl');
       });
-    });
-    // TODO: Need test for checking default attribute values
-  });
-  describe('use on a div element with one-way binding', function() {
-    it('(one-way) should render someattr value in template', function() {
-      inject(function($compile) {
-        var element;
-        scope.mymodel = 'ATTRVAL';
-        element = $compile("<div ui-template somemodel='mymodel'></div>")(scope);
-        expect(element.text()).toEqual('ATTRVAL');
+
+      it('exist when provided', function() {
+        expect(tmpl).toBeDefined();
       });
+      
+      it('return exactly what interesting thing the filter is doing to input', function() {
+        expect(tmpl('text')).toEqual('text');
+      });
+
     });
   });
-  describe('use as tag with two-way binding', function() {
-    it('(two-way) should render MODELVAL in template ', function() {
-      inject(function($compile) {
-        var element;
-        element = $compile("<ui-template ng-model='mymodel'></ui-template>")(scope);
-        scope.$apply(function() {
-          scope.mymodel = 'MODELVAL';
-        });
-        expect(element.text()).toEqual('MODELVAL');
+
+  describe('directive tests', function() {
+    var element;
+    describe('uiDirectiveTmpl should', function() {
+      it('create an element if using element-style', function() {
+        var element = $compile('<ui-directive-tmpl ng-model="a"></ui-directive-tmpl>')($rootScope);
+        expect(element).toBeDefined();
+      });
+      it('render the models value in element', function() {
+        var element = $compile('<div ui-directive-tmpl ng-model="a"></div>')($rootScope);
+        expect(element.text()).toEqual('');
+        $rootScope.a = 'foo';
+        $rootScope.$digest();
+        expect(element.text()).toEqual('foo');
       });
     });
+
   });
+
 });
diff --git a/test/test-config.js b/test/test-config.js
@@ -18,7 +18,9 @@ files = [
   'test/lib/codemirror/codemirror.js',
   'test/lib/googlemaps/googlemaps.js',
   'build/angular-ui.js',
-  'modules/*/*/test/*.js'
+  'modules/*/*/test/*.js',
+  'templates/*.js',
+  'templates/*/test/*.js'
 ];
 
 // list of files to exclude

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-/* ui-template */`
	`1`	`+/* default styles (if any) for your directive implementations */`
	`2`	`+`