Skip to content

Commit

Permalink
Refactored render directive using modern $transclude cloning mechanis…
Browse files Browse the repository at this point in the history 
…m instead of manual cloning

ATTENTION: AngularJS 1.1.x is no longer supported due to this fix!

Closes #56
  • Loading branch information
@artch
artch committed Mar 13, 2015
1 parent 66f3ce7 commit 904b724
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 100 deletions.
8 changes: 4 additions & 4 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@
</div>


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-animate.js"></script>
<script src="../build/angular-route-segment.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
<script src="../build/angular-route-segment.js"></script>
<script src="app.js"></script>

</body>
Expand Down
22 changes: 0 additions & 22 deletions karma-angular-1.1.conf.js
View file

This file was deleted.

131 changes: 69 additions & 62 deletions src/view-segment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,111 +9,118 @@
(function(angular) {

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

return {
restrict : 'ECA',
priority: 500,
compile : function(tElement, tAttrs) {

var defaultContent = tElement.html(), isDefault = true,
anchor = angular.element(document.createComment(' view-segment '));
priority: 400,
transclude: 'element',

tElement.prepend(anchor);
compile : function(tElement, tAttrs) {

return function($scope) {
return function($scope, element, attrs, ctrl, $transclude) {

var currentScope, currentElement, currentSegment, onloadExp = tAttrs.onload || '', animate,
viewSegmentIndex = parseInt(tAttrs.appViewSegment), updatePromise;
var currentScope, currentElement, currentSegment = {}, onloadExp = tAttrs.onload || '',
viewSegmentIndex = parseInt(tAttrs.appViewSegment), updatePromise, previousLeaveAnimation;

try {
// angular 1.1.x
var $animator = $injector.get('$animator')
animate = $animator($scope, tAttrs);
}
catch(e) {}
try {
// angular 1.2.x
animate = $injector.get('$animate');
}
catch(e) {}

if($routeSegment.chain[viewSegmentIndex])
updatePromise = $timeout(function() {
if($routeSegment.chain[viewSegmentIndex]) {
updatePromise = $timeout(function () {
update($routeSegment.chain[viewSegmentIndex]);
}, 0);
}
else {
update();
}

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

if(updatePromise)
$timeout.cancel(updatePromise);

if(args.index == viewSegmentIndex && currentSegment != args.segment)
if(args.index == viewSegmentIndex && currentSegment != args.segment) {
update(args.segment);
}
});

function clearContent() {

if(currentElement) {
animate.leave(currentElement);
currentElement = null;
if (previousLeaveAnimation) {
$animate.cancel(previousLeaveAnimation);
previousLeaveAnimation = null;
}

if (currentScope) {
currentScope.$destroy();
currentScope = null;
}
if (currentElement) {
previousLeaveAnimation = $animate.leave(currentElement);
if(previousLeaveAnimation) {
previousLeaveAnimation.then(function () {
previousLeaveAnimation = null;
});
}
currentElement = null;
}
}


function update(segment) {

currentSegment = segment;

if(isDefault) {
isDefault = false;
tElement.replaceWith(anchor);
}
var newScope = $scope.$new();

if(!segment) {
var clone = $transclude(newScope, function(clone) {
if(segment) {
clone.data('viewSegment', segment);
}
$animate.enter(clone, null, currentElement || element);
clearContent();
currentElement = tElement.clone();
currentElement.html(defaultContent);
animate.enter( currentElement, null, anchor );
$compile(currentElement, false, 499)($scope);
return;
}
});

var locals = angular.extend({}, segment.locals),
template = locals && locals.$template;
currentElement = clone;
currentScope = newScope;
currentScope.$emit('$viewContentLoaded');
currentScope.$eval(onloadExp);
}
}
}
}
}]);

angular.module( 'view-segment').directive( 'appViewSegment',
['$route', '$compile', '$controller', function($route, $compile, $controller) {

return {
restrict: 'ECA',
priority: -400,
link: function ($scope, element) {

clearContent();
var segment = element.data('viewSegment') || {};

currentElement = tElement.clone();
currentElement.html(template ? template : defaultContent);
animate.enter( currentElement, null, anchor );
var locals = angular.extend({}, segment.locals),
template = locals && locals.$template;

var link = $compile(currentElement, false, 499), controller;
if(template) {
element.html(template);
}

var link = $compile(element.contents());

currentScope = $scope.$new();
if (segment.params.controller) {
locals.$scope = currentScope;
controller = $controller(segment.params.controller, locals);
if (segment.params && segment.params.controller) {
locals.$scope = $scope;
var controller = $controller(segment.params.controller, locals);
if(segment.params.controllerAs)
currentScope[segment.params.controllerAs] = controller;
currentElement.data('$ngControllerController', controller);
currentElement.children().data('$ngControllerController', controller);
$scope[segment.params.controllerAs] = controller;
element.data('$ngControllerController', controller);
element.children().data('$ngControllerController', controller);
}

link(currentScope);
currentScope.$emit('$viewContentLoaded');
currentScope.$eval(onloadExp);
}
link($scope);
}
}
}
}]);

}]);

})(angular);
Loading

0 comments on commit 904b724

Please sign in to comment.