Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit f54db2c

Browse files
IgorMinarIgorMinar
committed
chore(directives,widgets): reorg the code under directive/ dir
1 parent dd7b0f5 commit f54db2c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+3951
-3818
lines changed

‎angularFiles.js

+25-8
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,29 @@ angularFiles = {
3838
'src/service/http.js',
3939
'src/service/httpBackend.js',
4040
'src/service/locale.js',
41-
'src/directives.js',
42-
'src/markups.js',
43-
'src/widgets.js',
44-
'src/widget/form.js',
45-
'src/widget/input.js',
46-
'src/widget/select.js'
41+
'src/directive/directives.js',
42+
'src/directive/a.js',
43+
'src/directive/booleanAttrDirs.js',
44+
'src/directive/form.js',
45+
'src/directive/input.js',
46+
'src/directive/ngBind.js',
47+
'src/directive/ngClass.js',
48+
'src/directive/ngCloak.js',
49+
'src/directive/ngController.js',
50+
'src/directive/ngEventDirs.js',
51+
'src/directive/ngInclude.js',
52+
'src/directive/ngInit.js',
53+
'src/directive/ngNonBindable.js',
54+
'src/directive/ngPluralize.js',
55+
'src/directive/ngRepeat.js',
56+
'src/directive/ngShowHide.js',
57+
'src/directive/ngStyle.js',
58+
'src/directive/ngSwitch.js',
59+
'src/directive/ngTransclude.js',
60+
'src/directive/ngView.js',
61+
'src/directive/script.js',
62+
'src/directive/select.js',
63+
'src/directive/style.js'
4764
],
4865

4966
'angularScenario': [
@@ -83,7 +100,7 @@ angularFiles = {
83100
'test/*.js',
84101
'test/service/*.js',
85102
'test/service/filter/*.js',
86-
'test/widget/*.js',
103+
'test/directive/*.js',
87104
'example/personalLog/test/*.js'
88105
],
89106

@@ -143,7 +160,7 @@ angularFiles = {
143160
'test/jstd-scenario-adapter/*.js',
144161
'test/*.js',
145162
'test/service/*.js',
146-
'test/widget/*.js',
163+
'test/directive/*.js',
147164
'example/personalLog/test/*.js'
148165
],
149166

‎src/directive/a.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use strict';
2+
3+
/*
4+
* Modifies the default behavior of html A tag, so that the default action is prevented when href
5+
* attribute is empty.
6+
*
7+
* The reasoning for this change is to allow easy creation of action links with ng:click without
8+
* changing the location or causing page reloads, e.g.:
9+
* <a href="" ng:click="model.$save()">Save</a>
10+
*/
11+
var htmlAnchorDirective = valueFn({
12+
restrict: 'E',
13+
compile: function(element, attr) {
14+
// turn <a href ng:click="..">link</a> into a link in IE
15+
// but only if it doesn't have name attribute, in which case it's an anchor
16+
if (!attr.href) {
17+
attr.$set('href', '');
18+
}
19+
20+
return function(scope, element) {
21+
element.bind('click', function(event){
22+
// if we have no href url, then don't navigate anywhere.
23+
if (!element.attr('href')) {
24+
event.preventDefault();
25+
}
26+
});
27+
}
28+
}
29+
});

‎src/markups.js renamed to ‎src/directive/booleanAttrDirs.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
'use strict';
22

3-
43
/**
54
* @ngdoc directive
65
* @name angular.module.ng.$compileProvider.directive.ng:href
@@ -267,3 +266,17 @@
267266
* @param {template} template any string which can contain '{{}}' markup.
268267
*/
269268

269+
270+
function ngAttributeAliasDirective(propName, attrName) {
271+
ngAttributeAliasDirectives[directiveNormalize('ng-' + attrName)] = valueFn(
272+
function(scope, element, attr) {
273+
attr.$observe(directiveNormalize('ng-' + attrName), function(value) {
274+
attr.$set(attrName, value);
275+
});
276+
}
277+
);
278+
}
279+
280+
var ngAttributeAliasDirectives = {};
281+
forEach(BOOLEAN_ATTR, ngAttributeAliasDirective);
282+
ngAttributeAliasDirective(null, 'src');

‎src/directive/directives.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
'use strict';
2+
3+
function ngDirective(directive) {
4+
if (isFunction(directive)) {
5+
directive = {
6+
link: directive
7+
}
8+
}
9+
directive.restrict = directive.restrict || 'AC';
10+
return valueFn(directive);
11+
};

‎src/widget/form.js renamed to ‎src/directive/form.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
*
1818
* @description
1919
* `FormController` keeps track of all its widgets as well as state of them form, such as being valid/invalid or dirty/pristine.
20-
*
20+
*
2121
* Each {@link angular.module.ng.$compileProvider.directive.form form} directive creates an instance
2222
* of `FormController`.
2323
*

‎src/widget/input.js renamed to ‎src/directive/input.js

File renamed without changes.

‎src/directive/ngBind.js

+249
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
'use strict';
2+
3+
/**
4+
* @ngdoc directive
5+
* @name angular.module.ng.$compileProvider.directive.ng:bind
6+
*
7+
* @description
8+
* The `ng:bind` attribute tells Angular to replace the text content of the specified HTML element
9+
* with the value of a given expression, and to update the text content when the value of that
10+
* expression changes.
11+
*
12+
* Typically, you don't use `ng:bind` directly, but instead you use the double curly markup like
13+
* `{{ expression }}` and let the Angular compiler transform it to
14+
* `<span ng:bind="expression"></span>` when the template is compiled.
15+
*
16+
* @element ANY
17+
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate.
18+
*
19+
* @example
20+
* Enter a name in the Live Preview text box; the greeting below the text box changes instantly.
21+
<doc:example>
22+
<doc:source>
23+
<script>
24+
function Ctrl($scope) {
25+
$scope.name = 'Whirled';
26+
}
27+
</script>
28+
<div ng:controller="Ctrl">
29+
Enter name: <input type="text" ng:model="name"> <br/>
30+
Hello <span ng:bind="name"></span>!
31+
</div>
32+
</doc:source>
33+
<doc:scenario>
34+
it('should check ng:bind', function() {
35+
expect(using('.doc-example-live').binding('name')).toBe('Whirled');
36+
using('.doc-example-live').input('name').enter('world');
37+
expect(using('.doc-example-live').binding('name')).toBe('world');
38+
});
39+
</doc:scenario>
40+
</doc:example>
41+
*/
42+
var ngBindDirective = ngDirective(function(scope, element, attr) {
43+
element.addClass('ng-binding').data('$binding', attr.ngBind);
44+
scope.$watch(attr.ngBind, function(value) {
45+
element.text(value == undefined ? '' : value);
46+
});
47+
});
48+
49+
50+
/**
51+
* @ngdoc directive
52+
* @name angular.module.ng.$compileProvider.directive.ng:bind-html-unsafe
53+
*
54+
* @description
55+
* Creates a binding that will innerHTML the result of evaluating the `expression` into the current
56+
* element. *The innerHTML-ed content will not be sanitized!* You should use this directive only if
57+
* {@link angular.module.ng.$compileProvider.directive.ng:bind-html ng:bind-html} directive is too
58+
* restrictive and when you absolutely trust the source of the content you are binding to.
59+
*
60+
* See {@link angular.module.ng.$sanitize $sanitize} docs for examples.
61+
*
62+
* @element ANY
63+
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate.
64+
*/
65+
var ngBindHtmlUnsafeDirective = ngDirective(function(scope, element, attr) {
66+
element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe);
67+
scope.$watch(attr.ngBindHtmlUnsafe, function(value) {
68+
element.html(value == undefined ? '' : value);
69+
});
70+
});
71+
72+
73+
/**
74+
* @ngdoc directive
75+
* @name angular.module.ng.$compileProvider.directive.ng:bind-html
76+
*
77+
* @description
78+
* Creates a binding that will sanitize the result of evaluating the `expression` with the
79+
* {@link angular.module.ng.$sanitize $sanitize} service and innerHTML the result into the current
80+
* element.
81+
*
82+
* See {@link angular.module.ng.$sanitize $sanitize} docs for examples.
83+
*
84+
* @element ANY
85+
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate.
86+
*/
87+
var ngBindHtmlDirective = ['$sanitize', function($sanitize) {
88+
return function(scope, element, attr) {
89+
element.addClass('ng-binding').data('$binding', attr.ngBindHtml);
90+
scope.$watch(attr.ngBindHtml, function(value) {
91+
if (value = $sanitize(value)) {
92+
element.html(value);
93+
}
94+
});
95+
}
96+
}];
97+
98+
99+
/**
100+
* @ngdoc directive
101+
* @name angular.module.ng.$compileProvider.directive.ng:bind-template
102+
*
103+
* @description
104+
* The `ng:bind-template` attribute specifies that the element
105+
* text should be replaced with the template in ng:bind-template.
106+
* Unlike ng:bind the ng:bind-template can contain multiple `{{` `}}`
107+
* expressions. (This is required since some HTML elements
108+
* can not have SPAN elements such as TITLE, or OPTION to name a few.)
109+
*
110+
* @element ANY
111+
* @param {string} template of form
112+
* <tt>{{</tt> <tt>expression</tt> <tt>}}</tt> to eval.
113+
*
114+
* @example
115+
* Try it here: enter text in text box and watch the greeting change.
116+
<doc:example>
117+
<doc:source>
118+
<script>
119+
function Ctrl($scope) {
120+
$scope.salutation = 'Hello';
121+
$scope.name = 'World';
122+
}
123+
</script>
124+
<div ng:controller="Ctrl">
125+
Salutation: <input type="text" ng:model="salutation"><br/>
126+
Name: <input type="text" ng:model="name"><br/>
127+
<pre ng:bind-template="{{salutation}} {{name}}!"></pre>
128+
</div>
129+
</doc:source>
130+
<doc:scenario>
131+
it('should check ng:bind', function() {
132+
expect(using('.doc-example-live').binding('salutation')).
133+
toBe('Hello');
134+
expect(using('.doc-example-live').binding('name')).
135+
toBe('World');
136+
using('.doc-example-live').input('salutation').enter('Greetings');
137+
using('.doc-example-live').input('name').enter('user');
138+
expect(using('.doc-example-live').binding('salutation')).
139+
toBe('Greetings');
140+
expect(using('.doc-example-live').binding('name')).
141+
toBe('user');
142+
});
143+
</doc:scenario>
144+
</doc:example>
145+
*/
146+
var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
147+
return function(scope, element, attr) {
148+
// TODO: move this to scenario runner
149+
var interpolateFn = $interpolate(element.attr(attr.$attr.ngBindTemplate));
150+
element.addClass('ng-binding').data('$binding', interpolateFn);
151+
attr.$observe('ngBindTemplate', function(value) {
152+
element.text(value);
153+
});
154+
}
155+
}];
156+
157+
158+
/**
159+
* @ngdoc directive
160+
* @name angular.module.ng.$compileProvider.directive.ng:bind-attr
161+
*
162+
* @description
163+
* The `ng:bind-attr` attribute specifies that a
164+
* {@link guide/dev_guide.templates.databinding databinding} should be created between a particular
165+
* element attribute and a given expression. Unlike `ng:bind`, the `ng:bind-attr` contains one or
166+
* more JSON key value pairs; each pair specifies an attribute and the
167+
* {@link guide/dev_guide.expressions expression} to which it will be mapped.
168+
*
169+
* Instead of writing `ng:bind-attr` statements in your HTML, you can use double-curly markup to
170+
* specify an <tt ng:non-bindable>{{expression}}</tt> for the value of an attribute.
171+
* At compile time, the attribute is translated into an
172+
* `<span ng:bind-attr="{attr:expression}"></span>`.
173+
*
174+
* The following HTML snippet shows how to specify `ng:bind-attr`:
175+
* <pre>
176+
* <a ng:bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>Google</a>
177+
* </pre>
178+
*
179+
* This is cumbersome, so as we mentioned using double-curly markup is a prefered way of creating
180+
* this binding:
181+
* <pre>
182+
* <a href="http://www.google.com/search?q={{query}}">Google</a>
183+
* </pre>
184+
*
185+
* During compilation, the template with attribute markup gets translated to the ng:bind-attr form
186+
* mentioned above.
187+
*
188+
* _Note_: You might want to consider using {@link angular.module.ng.$compileProvider.directive.ng:href ng:href} instead of
189+
* `href` if the binding is present in the main application template (`index.html`) and you want to
190+
* make sure that a user is not capable of clicking on raw/uncompiled link.
191+
*
192+
*
193+
* @element ANY
194+
* @param {string} attribute_json one or more JSON key-value pairs representing
195+
* the attributes to replace with expressions. Each key matches an attribute
196+
* which needs to be replaced. Each value is a text template of
197+
* the attribute with the embedded
198+
* <tt ng:non-bindable>{{expression}}</tt>s. Any number of
199+
* key-value pairs can be specified.
200+
*
201+
* @example
202+
* Enter a search string in the Live Preview text box and then click "Google". The search executes instantly.
203+
<doc:example>
204+
<doc:source>
205+
<script>
206+
function Ctrl($scope) {
207+
$scope.query = 'AngularJS';
208+
}
209+
</script>
210+
<div ng:controller="Ctrl">
211+
Google for:
212+
<input type="text" ng:model="query"/>
213+
<a ng:bind-attr='{"href":"http://www.google.com/search?q={{query}}"}'>
214+
Google
215+
</a> (ng:bind-attr) |
216+
<a href="http://www.google.com/search?q={{query}}">Google</a>
217+
(curly binding in attribute val)
218+
</div>
219+
</doc:source>
220+
<doc:scenario>
221+
it('should check ng:bind-attr', function() {
222+
expect(using('.doc-example-live').element('a').attr('href')).
223+
toBe('http://www.google.com/search?q=AngularJS');
224+
using('.doc-example-live').input('query').enter('google');
225+
expect(using('.doc-example-live').element('a').attr('href')).
226+
toBe('http://www.google.com/search?q=google');
227+
});
228+
</doc:scenario>
229+
</doc:example>
230+
*/
231+
232+
var ngBindAttrDirective = ['$interpolate', function($interpolate) {
233+
return function(scope, element, attr) {
234+
var lastValue = {};
235+
var interpolateFns = {};
236+
scope.$watch(function() {
237+
var values = scope.$eval(attr.ngBindAttr);
238+
for(var key in values) {
239+
var exp = values[key],
240+
fn = (interpolateFns[exp] ||
241+
(interpolateFns[values[key]] = $interpolate(exp))),
242+
value = fn(scope);
243+
if (lastValue[key] !== value) {
244+
attr.$set(key, lastValue[key] = value);
245+
}
246+
}
247+
});
248+
}
249+
}];

0 commit comments

Comments
 (0)