Skip to content

Commit 17cb802

Browse files
dandoyondandoyon
committed
Simplified and restructured template, added a filter template using
uiConfig Updated README.md
1 parent b52de10 commit 17cb802

File tree

5 files changed

+283
-125
lines changed

5 files changed

+283
-125
lines changed

‎templates/README.md

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,46 @@
11
# ui-template directives
22

3-
These directives are boilerplates for creating your own directives.
3+
These are boilerplates for creating filters and directives. They use uiConfig so that you can globally assign config options (see uiConfig doc).
4+
Currently there are only two templates, one for filter and one for directive along with simple a implementation of each.
45

56
## Usage
67

7-
Load the script file: template.js in your application:
8-
9-
<script type="text/javascript" src="modules/directives/template/src/template.js"></script>
10-
11-
Add the template module as a dependency to your application module:
12-
13-
var myAppModule = angular.module('MyApp', ['ui.directives.template'])
14-
15-
Apply the directive to your html elements:
16-
17-
<span ui-template num="SomeNumber"></span>
18-
19-
Default styles are in angular-ui.css and are pretty boring, you could just override these in your
20-
stylesheet and make things more interesting
21-
22-
### Options
23-
24-
All the options can be passed through the directive or set on the html element.
25-
NOTE: attributes override controller options
26-
27-
myAppModule.controller('MyController', function($scope) {
28-
$scope.SomeNumber = 123;
29-
$scope.uiTemplateOptions = {
30-
31-
};
32-
});
33-
34-
// two-way binding with default for scoped.options uiTemplateOptions
35-
<span ui-template ng-model="SomeNumber"></span>
36-
37-
// one way binding with your own name for scoped options
38-
<span ui-template options="myOptions" num="SomeNumber"></span>
39-
40-
41-
### Notes
42-
43-
ui-template
44-
- one-way binding unless you have in an ng-repeat
45-
- does not currently work with ng-model.
46-
- is supported only for attribute style elements
47-
8+
Here's how the two sample impls could be used
9+
<html>
10+
<head>
11+
<!-- your angular and other library imports here -->
12+
<script>
13+
// create global prefix/suffix for elements using wrap filter
14+
var myApp = angular.module('myApp',['ui'])
15+
.value('ui.config', { 'wrapFilter': { 'prefix' : 'foo-', 'suffix' : '-bar' }});
16+
17+
function MyCtrl($scope) {
18+
$scope.alpha = "some words here";
19+
$scope.num = " 123 ";
20+
}
21+
</script>
22+
23+
<style>
24+
.ui-alpha {
25+
font-size: 150%;
26+
color: red;
27+
}
28+
.ui-numeric {
29+
font-size: 180%;
30+
color: green;
31+
}
32+
</style>
33+
34+
</head>
35+
36+
<body ng-controller="MyCtrl">
37+
<div>
38+
<span>{{alpha | wrap}}</span>
39+
<span ui-stylize ng-model="alpha"></span>
40+
<span ui-stylize ng-model="num"></span>
41+
</div>
42+
</body>
43+
44+
</html>
4845
### Todo
49-
- support ng-model
50-
46+
- sample wrapping third party lib

‎templates/src/template.js

Lines changed: 0 additions & 49 deletions
This file was deleted.

‎templates/stylesheets/template.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
11
/* ui-template */
2+
.ui-numeric {
3+
font-color: green;
4+
}
5+
.ui-alpha {
6+
font-color: blue;
7+
}

‎templates/template.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/*
2+
* Filter/directive templates
3+
*/
4+
angular.module('ui.filters')
5+
.filter('tmpl', ['ui.config', function(uiConfig) { // tmplFilter is a boilerplate setup for your coding pleasure
6+
var config = { };
7+
if (uiConfig.tmplFilter) {
8+
angular.extend(config, uiConfig.tmplFilter);
9+
}
10+
return function (value, kind) {
11+
var opts = {}, inputs = {}, out;
12+
// if an input is given then override
13+
if(kind) {
14+
inputs = {'kind' : kind };
15+
}
16+
angular.extend(opts, config, inputs);
17+
//
18+
// do something more interesting to input value here
19+
//
20+
out = value;
21+
return out;
22+
};
23+
}])
24+
.filter('wrap', ['ui.config', function(uiConfig) { // wrapFilter is a simple filter that wraps the incoming value, but only if value has a value.
25+
var config = { };
26+
if (uiConfig.wrapFilter) {
27+
angular.extend(config, uiConfig.wrapFilter);
28+
}
29+
return function (value, prefix, suffix) {
30+
var opts = {}, inputs = {};
31+
// if an input is given then override
32+
if(prefix) {
33+
inputs = {'prefix' : prefix, 'suffix' : suffix};
34+
}
35+
// build up our options
36+
angular.extend(opts, config, inputs);
37+
if(!value || value == '') {
38+
return '';
39+
}
40+
41+
if(opts.prefix) {
42+
return opts.prefix + value + (opts.suffix || '');
43+
}
44+
return value;
45+
};
46+
}]);
47+
48+
angular.module('ui.directives')
49+
.directive('uiTmpl', ['ui.config', function(uiConfig) {
50+
var config = { };
51+
if (uiConfig.tmpl) {
52+
angular.extend(config, uiConfig.tmpl);
53+
}
54+
return {
55+
restrict: 'EAC', // supports using directive as element, attribute and class
56+
require: 'ngModel', // requires ng-model controller so we get the two-way binding
57+
link: function(scope, element, attrs, ngModel) {
58+
var opts = {}; // instance-specific options
59+
60+
// build up our options
61+
angular.extend(opts, config, scope.$eval(attrs.uiTmpl)); // element attributes that override default options
62+
63+
// override the controllers render function and do something interesting in here
64+
ngModel.$render = function() {
65+
element.text(ngModel.$viewValue); // boring
66+
};
67+
}
68+
};
69+
}])
70+
.directive('uiStylize', ['ui.config', function(uiConfig) { // uiStylize sets style based on if value is alpha or numeric
71+
var config = { };
72+
if (uiConfig.stylize) {
73+
angular.extend(config, uiConfig.stylize);
74+
}
75+
return {
76+
restrict: 'EAC', // supports using directive as element, attribute and class
77+
require: 'ngModel', // requires ng-model controller so we get the two-way binding
78+
link: function(scope, element, attrs, ngModel) {
79+
var opts = {}; // instance-specific options
80+
81+
// build up our options
82+
angular.extend(opts, config, scope.$eval(attrs.uiStylize)); // element attributes that override default options
83+
84+
// override the controllers render function and do something interesting in here
85+
ngModel.$render = function() {
86+
var numval;
87+
try {
88+
// a different approach would be to use a regex, however this might be faster
89+
numval = parseFloat(ngModel.$viewValue);
90+
// javascript will parse a number with characters and come up with a number
91+
// make sure that the result is the same as what was in model
92+
if(numval != ngModel.$viewValue) {
93+
numval = null;
94+
}
95+
} catch(err) {
96+
// don't do anything numval will be undefined
97+
}
98+
if(numval) {
99+
element.addClass("ui-numeric");
100+
} else {
101+
element.addClass("ui-alpha");
102+
}
103+
element.text(ngModel.$viewValue); // boring
104+
};
105+
}
106+
};
107+
}]);

0 commit comments

Comments
 (0)