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

Commit def1619

Browse files
author
Kara Erickson
committedJun 2, 2015
feat(ngTranscludeSelect): add ng-transclude-select directive
The ng-translude-select directive allows users to transclude multiple templates into their directive.
1 parent d7dc14d commit def1619

File tree

4 files changed

+89
-0
lines changed

4 files changed

+89
-0
lines changed
 

‎angularFiles.js

+1
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ var angularFiles = {
7373
'src/ng/directive/ngStyle.js',
7474
'src/ng/directive/ngSwitch.js',
7575
'src/ng/directive/ngTransclude.js',
76+
'src/ng/directive/ngTranscludeSelect.js',
7677
'src/ng/directive/script.js',
7778
'src/ng/directive/select.js',
7879
'src/ng/directive/style.js',

‎src/AngularPublic.js

+2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
ngSwitchDefaultDirective,
4040
ngOptionsDirective,
4141
ngTranscludeDirective,
42+
ngTranscludeSelectDirective,
4243
ngModelDirective,
4344
ngListDirective,
4445
ngChangeDirective,
@@ -197,6 +198,7 @@ function publishExternalAPI(angular) {
197198
ngSwitchDefault: ngSwitchDefaultDirective,
198199
ngOptions: ngOptionsDirective,
199200
ngTransclude: ngTranscludeDirective,
201+
ngTranscludeSelect: ngTranscludeSelectDirective,
200202
ngModel: ngModelDirective,
201203
ngList: ngListDirective,
202204
ngChange: ngChangeDirective,
+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
'use strict';
2+
3+
/**
4+
* @ngdoc directive
5+
* @name ngTranscludeSelect
6+
* @restrict EAC
7+
*
8+
* @description
9+
*
10+
* @element ANY
11+
*
12+
*/
13+
var ngTranscludeSelectDirective = ngDirective({
14+
restrict: 'EAC',
15+
link: function($scope, $element, $attrs, controller, $transclude) {
16+
checkTranscludeOption();
17+
$transclude(transcludeSelection);
18+
19+
function transcludeSelection(clone) {
20+
var selector = $attrs.ngTranscludeSelect;
21+
var selectedElements = getSelectedElements(clone, selector);
22+
if (selectedElements.length) $element.append(selectedElements);
23+
}
24+
25+
function getSelectedElements(clone, selector) {
26+
var wrapper = wrapClone(clone);
27+
var selectedElements = wrapper[0].querySelectorAll(selector);
28+
wrapper.remove();
29+
return selectedElements;
30+
}
31+
32+
function wrapClone(clone) {
33+
var wrapper = jqLite("<div>");
34+
wrapper.append(clone);
35+
return wrapper;
36+
}
37+
38+
function checkTranscludeOption() {
39+
if (!$transclude) {
40+
throw minErr('ngTransclude')('orphan',
41+
'Illegal use of ngTranscludeSelect directive in the template! ' +
42+
'No parent directive that requires a transclusion found. ' +
43+
'Element: {0}',
44+
startingTag($element));
45+
}
46+
}
47+
}
48+
});
49+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use strict';
2+
3+
4+
describe('ngTranscludeSelect', function() {
5+
it('should append matching clone elements to ng-transclude-select elements', function() {
6+
module(function($compileProvider) {
7+
$compileProvider.directive('transclude', valueFn({
8+
transclude: true,
9+
scope: {},
10+
template: '<div ng-transclude-select="[top]"></div><div ng-transclude-select="[bottom]"></div>'
11+
}));
12+
});
13+
inject(function($compile, $rootScope) {
14+
var topTarget, bottomTarget;
15+
var element = $compile(
16+
'<div transclude><div bottom>In bottom.</div><div top>In top.</div></div></div>'
17+
)($rootScope);
18+
topTarget = jqLite(element[0].querySelector('[ng-transclude-select="[top]"]'));
19+
bottomTarget = jqLite(element[0].querySelector('[ng-transclude-select="[bottom]"]'));
20+
expect(topTarget.text()).toEqual('In top.');
21+
expect(bottomTarget.text()).toEqual('In bottom.');
22+
});
23+
});
24+
it('should throw on an ng-transclude-select element inside no transclusion directive', function() {
25+
inject(function($rootScope, $compile) {
26+
try {
27+
$compile('<div><div ng-transclude-select="[top]"></div></div>')($rootScope);
28+
} catch (e) {
29+
expect(e.message).toMatch(new RegExp(
30+
'^\\[ngTransclude:orphan\\] ' +
31+
'Illegal use of ngTranscludeSelect directive in the template! ' +
32+
'No parent directive that requires a transclusion found\\. ' +
33+
'Element: <div ng-transclude-select.+'));
34+
}
35+
});
36+
});
37+
});

0 commit comments

Comments
 (0)