Skip to content

Commit 904b724

Browse files
artchartch
committed
Refactored render directive using modern $transclude cloning mechanism instead of manual cloning
ATTENTION: AngularJS 1.1.x is no longer supported due to this fix! Closes #56
1 parent 66f3ce7 commit 904b724

File tree

4 files changed

+151
-100
lines changed

4 files changed

+151
-100
lines changed

‎example/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@
3939
</div>
4040

4141

42-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
43-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
44-
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-animate.js"></script>
45-
<script src="../build/angular-route-segment.min.js"></script>
42+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
43+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
44+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
45+
<script src="../build/angular-route-segment.js"></script>
4646
<script src="app.js"></script>
4747

4848
</body>

‎karma-angular-1.1.conf.js

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

‎src/view-segment.js

Lines changed: 69 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -9,111 +9,118 @@
99
(function(angular) {
1010

1111
angular.module( 'view-segment', [ 'route-segment' ] ).directive( 'appViewSegment',
12-
['$route', '$compile', '$controller', '$routeParams', '$routeSegment', '$q', '$injector', '$timeout',
13-
function($route, $compile, $controller, $routeParams, $routeSegment, $q, $injector, $timeout) {
12+
['$route', '$compile', '$controller', '$routeParams', '$routeSegment', '$q', '$injector', '$timeout', '$animate',
13+
function($route, $compile, $controller, $routeParams, $routeSegment, $q, $injector, $timeout, $animate) {
1414

1515
return {
1616
restrict : 'ECA',
17-
priority: 500,
18-
compile : function(tElement, tAttrs) {
19-
20-
var defaultContent = tElement.html(), isDefault = true,
21-
anchor = angular.element(document.createComment(' view-segment '));
17+
priority: 400,
18+
transclude: 'element',
2219

23-
tElement.prepend(anchor);
20+
compile : function(tElement, tAttrs) {
2421

25-
return function($scope) {
22+
return function($scope, element, attrs, ctrl, $transclude) {
2623

27-
var currentScope, currentElement, currentSegment, onloadExp = tAttrs.onload || '', animate,
28-
viewSegmentIndex = parseInt(tAttrs.appViewSegment), updatePromise;
24+
var currentScope, currentElement, currentSegment = {}, onloadExp = tAttrs.onload || '',
25+
viewSegmentIndex = parseInt(tAttrs.appViewSegment), updatePromise, previousLeaveAnimation;
2926

30-
try {
31-
// angular 1.1.x
32-
var $animator = $injector.get('$animator')
33-
animate = $animator($scope, tAttrs);
34-
}
35-
catch(e) {}
36-
try {
37-
// angular 1.2.x
38-
animate = $injector.get('$animate');
39-
}
40-
catch(e) {}
41-
42-
if($routeSegment.chain[viewSegmentIndex])
43-
updatePromise = $timeout(function() {
27+
if($routeSegment.chain[viewSegmentIndex]) {
28+
updatePromise = $timeout(function () {
4429
update($routeSegment.chain[viewSegmentIndex]);
4530
}, 0);
31+
}
32+
else {
33+
update();
34+
}
4635

4736
// Watching for the specified route segment and updating contents
4837
$scope.$on('routeSegmentChange', function(event, args) {
4938

5039
if(updatePromise)
5140
$timeout.cancel(updatePromise);
5241

53-
if(args.index == viewSegmentIndex && currentSegment != args.segment)
42+
if(args.index == viewSegmentIndex && currentSegment != args.segment) {
5443
update(args.segment);
44+
}
5545
});
5646

5747
function clearContent() {
58-
59-
if(currentElement) {
60-
animate.leave(currentElement);
61-
currentElement = null;
48+
if (previousLeaveAnimation) {
49+
$animate.cancel(previousLeaveAnimation);
50+
previousLeaveAnimation = null;
6251
}
6352

6453
if (currentScope) {
6554
currentScope.$destroy();
6655
currentScope = null;
6756
}
57+
if (currentElement) {
58+
previousLeaveAnimation = $animate.leave(currentElement);
59+
if(previousLeaveAnimation) {
60+
previousLeaveAnimation.then(function () {
61+
previousLeaveAnimation = null;
62+
});
63+
}
64+
currentElement = null;
65+
}
6866
}
6967

70-
7168
function update(segment) {
7269

7370
currentSegment = segment;
7471

75-
if(isDefault) {
76-
isDefault = false;
77-
tElement.replaceWith(anchor);
78-
}
72+
var newScope = $scope.$new();
7973

80-
if(!segment) {
74+
var clone = $transclude(newScope, function(clone) {
75+
if(segment) {
76+
clone.data('viewSegment', segment);
77+
}
78+
$animate.enter(clone, null, currentElement || element);
8179
clearContent();
82-
currentElement = tElement.clone();
83-
currentElement.html(defaultContent);
84-
animate.enter( currentElement, null, anchor );
85-
$compile(currentElement, false, 499)($scope);
86-
return;
87-
}
80+
});
8881

89-
var locals = angular.extend({}, segment.locals),
90-
template = locals && locals.$template;
82+
currentElement = clone;
83+
currentScope = newScope;
84+
currentScope.$emit('$viewContentLoaded');
85+
currentScope.$eval(onloadExp);
86+
}
87+
}
88+
}
89+
}
90+
}]);
91+
92+
angular.module( 'view-segment').directive( 'appViewSegment',
93+
['$route', '$compile', '$controller', function($route, $compile, $controller) {
94+
95+
return {
96+
restrict: 'ECA',
97+
priority: -400,
98+
link: function ($scope, element) {
9199

92-
clearContent();
100+
var segment = element.data('viewSegment') || {};
93101

94-
currentElement = tElement.clone();
95-
currentElement.html(template ? template : defaultContent);
96-
animate.enter( currentElement, null, anchor );
102+
var locals = angular.extend({}, segment.locals),
103+
template = locals && locals.$template;
97104

98-
var link = $compile(currentElement, false, 499), controller;
105+
if(template) {
106+
element.html(template);
107+
}
108+
109+
var link = $compile(element.contents());
99110

100-
currentScope = $scope.$new();
101-
if (segment.params.controller) {
102-
locals.$scope = currentScope;
103-
controller = $controller(segment.params.controller, locals);
111+
if (segment.params && segment.params.controller) {
112+
locals.$scope = $scope;
113+
var controller = $controller(segment.params.controller, locals);
104114
if(segment.params.controllerAs)
105-
currentScope[segment.params.controllerAs] = controller;
106-
currentElement.data('$ngControllerController', controller);
107-
currentElement.children().data('$ngControllerController', controller);
115+
$scope[segment.params.controllerAs] = controller;
116+
element.data('$ngControllerController', controller);
117+
element.children().data('$ngControllerController', controller);
108118
}
109119

110-
link(currentScope);
111-
currentScope.$emit('$viewContentLoaded');
112-
currentScope.$eval(onloadExp);
113-
}
120+
link($scope);
114121
}
115122
}
116-
}
117-
}]);
123+
124+
}]);
118125

119126
})(angular);

0 commit comments

Comments
 (0)