mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-20 20:31:52 +00:00
refactor($route): remove .parent(); ng:view scope creation
This commit is contained in:
parent
f16bd2f747
commit
e31d1c287d
6 changed files with 67 additions and 45 deletions
|
|
@ -36,16 +36,17 @@ The two partials are defined in the following URLs:
|
||||||
* <a href="./examples/settings.html" ng:ext-link>./examples/settings.html</a>
|
* <a href="./examples/settings.html" ng:ext-link>./examples/settings.html</a>
|
||||||
* <a href="./examples/welcome.html" ng:ext-link>./examples/welcome.html</a>
|
* <a href="./examples/welcome.html" ng:ext-link>./examples/welcome.html</a>
|
||||||
|
|
||||||
<doc:example>
|
<doc:example module="deepLinking">
|
||||||
<doc:source jsfiddle="false">
|
<doc:source jsfiddle="false">
|
||||||
<script>
|
<script>
|
||||||
|
angular.module('deepLinking', [])
|
||||||
|
.config(function($routeProvider) {
|
||||||
|
$routeProvider.when("/welcome", {template:'./examples/welcome.html', controller:WelcomeCntl});
|
||||||
|
$routeProvider.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl});
|
||||||
|
});
|
||||||
|
|
||||||
AppCntl.$inject = ['$scope', '$route']
|
AppCntl.$inject = ['$scope', '$route']
|
||||||
function AppCntl($scope, $route) {
|
function AppCntl($scope, $route) {
|
||||||
// define routes
|
|
||||||
$route.when("/welcome", {template:'./examples/welcome.html', controller:WelcomeCntl});
|
|
||||||
$route.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl});
|
|
||||||
$route.parent($scope);
|
|
||||||
|
|
||||||
// initialize the model to something useful
|
// initialize the model to something useful
|
||||||
$scope.person = {
|
$scope.person = {
|
||||||
name:'anonymous',
|
name:'anonymous',
|
||||||
|
|
|
||||||
|
|
@ -135,8 +135,8 @@ function $RouteProvider(){
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
this.$get = ['$rootScope', '$location', '$routeParams', '$controller',
|
this.$get = ['$rootScope', '$location', '$routeParams',
|
||||||
function( $rootScope, $location, $routeParams, $controller) {
|
function( $rootScope, $location, $routeParams) {
|
||||||
/**
|
/**
|
||||||
* @ngdoc event
|
* @ngdoc event
|
||||||
* @name angular.module.ng.$route#$beforeRouteChange
|
* @name angular.module.ng.$route#$beforeRouteChange
|
||||||
|
|
@ -185,28 +185,11 @@ function $RouteProvider(){
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var matcher = switchRouteMatcher,
|
var matcher = switchRouteMatcher,
|
||||||
parentScope = $rootScope,
|
|
||||||
dirty = 0,
|
dirty = 0,
|
||||||
forceReload = false,
|
forceReload = false,
|
||||||
$route = {
|
$route = {
|
||||||
routes: routes,
|
routes: routes,
|
||||||
|
|
||||||
/**
|
|
||||||
* @ngdoc method
|
|
||||||
* @name angular.module.ng.$route#parent
|
|
||||||
* @methodOf angular.module.ng.$route
|
|
||||||
*
|
|
||||||
* @param {Scope} [scope=rootScope] Scope to be used as parent for newly created
|
|
||||||
* `$route.current.scope` scopes.
|
|
||||||
*
|
|
||||||
* @description
|
|
||||||
* Sets a scope to be used as the parent scope for scopes created on route change. If not
|
|
||||||
* set, defaults to the root scope.
|
|
||||||
*/
|
|
||||||
parent: function(scope) {
|
|
||||||
if (scope) parentScope = scope;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @ngdoc method
|
* @ngdoc method
|
||||||
* @name angular.module.ng.$route#reload
|
* @name angular.module.ng.$route#reload
|
||||||
|
|
@ -266,7 +249,10 @@ function $RouteProvider(){
|
||||||
} else {
|
} else {
|
||||||
forceReload = false;
|
forceReload = false;
|
||||||
$rootScope.$broadcast('$beforeRouteChange', next, last);
|
$rootScope.$broadcast('$beforeRouteChange', next, last);
|
||||||
last && last.scope && last.scope.$destroy();
|
if (last && last.scope) {
|
||||||
|
last.scope.$destroy();
|
||||||
|
last.scope = null;
|
||||||
|
}
|
||||||
$route.current = next;
|
$route.current = next;
|
||||||
if (next) {
|
if (next) {
|
||||||
if (next.redirectTo) {
|
if (next.redirectTo) {
|
||||||
|
|
@ -279,10 +265,6 @@ function $RouteProvider(){
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
copy(next.params, $routeParams);
|
copy(next.params, $routeParams);
|
||||||
next.scope = parentScope.$new();
|
|
||||||
if (next.controller) {
|
|
||||||
$controller(next.controller, {$scope: next.scope});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$rootScope.$broadcast('$afterRouteChange', next, last);
|
$rootScope.$broadcast('$afterRouteChange', next, last);
|
||||||
|
|
|
||||||
|
|
@ -498,23 +498,23 @@ var ngNonBindableDirective = valueFn({ terminal: true });
|
||||||
*
|
*
|
||||||
*
|
*
|
||||||
* @example
|
* @example
|
||||||
<doc:example>
|
<doc:example module="ngView">
|
||||||
<doc:source jsfiddle="false">
|
<doc:source jsfiddle="false">
|
||||||
<script>
|
<script>
|
||||||
function MyCtrl($route) {
|
|
||||||
$route.when('/overview',
|
|
||||||
{ controller: OverviewCtrl,
|
|
||||||
template: 'partials/guide/dev_guide.overview.html'});
|
|
||||||
$route.when('/bootstrap',
|
|
||||||
{ controller: BootstrapCtrl,
|
|
||||||
template: 'partials/guide/dev_guide.bootstrap.auto_bootstrap.html'});
|
|
||||||
};
|
|
||||||
MyCtrl.$inject = ['$route'];
|
|
||||||
|
|
||||||
function BootstrapCtrl() {}
|
function BootstrapCtrl() {}
|
||||||
function OverviewCtrl() {}
|
function OverviewCtrl() {}
|
||||||
|
|
||||||
|
angular.module('ngView', [])
|
||||||
|
.config(function($routeProvider) {
|
||||||
|
$routeProvider.when('/overview',
|
||||||
|
{ controller: OverviewCtrl,
|
||||||
|
template: 'partials/guide/dev_guide.overview.html'});
|
||||||
|
$routeProvider.when('/bootstrap',
|
||||||
|
{ controller: BootstrapCtrl,
|
||||||
|
template: 'partials/guide/dev_guide.bootstrap.auto_bootstrap.html'});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<div ng:controller="MyCtrl">
|
<div>
|
||||||
<a href="overview">overview</a> |
|
<a href="overview">overview</a> |
|
||||||
<a href="bootstrap">bootstrap</a> |
|
<a href="bootstrap">bootstrap</a> |
|
||||||
<a href="undefined">undefined</a>
|
<a href="undefined">undefined</a>
|
||||||
|
|
@ -538,14 +538,18 @@ var ngNonBindableDirective = valueFn({ terminal: true });
|
||||||
</doc:example>
|
</doc:example>
|
||||||
*/
|
*/
|
||||||
var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$compile',
|
var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$compile',
|
||||||
function($http, $templateCache, $route, $anchorScroll, $compile) {
|
'$controller',
|
||||||
|
function($http, $templateCache, $route, $anchorScroll, $compile,
|
||||||
|
$controller) {
|
||||||
return {
|
return {
|
||||||
terminal: true,
|
terminal: true,
|
||||||
link: function(scope, element) {
|
link: function(scope, element) {
|
||||||
var changeCounter = 0;
|
var changeCounter = 0;
|
||||||
|
|
||||||
scope.$on('$afterRouteChange', function() {
|
processRoute($route.current);
|
||||||
|
scope.$on('$afterRouteChange', function(event, next) {
|
||||||
changeCounter++;
|
changeCounter++;
|
||||||
|
processRoute(next);
|
||||||
});
|
});
|
||||||
|
|
||||||
scope.$watch(function() {return changeCounter;}, function(newChangeCounter) {
|
scope.$watch(function() {return changeCounter;}, function(newChangeCounter) {
|
||||||
|
|
@ -571,6 +575,15 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c
|
||||||
clearContent();
|
clearContent();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function processRoute(route) {
|
||||||
|
if (route) {
|
||||||
|
route.scope = scope.$new();
|
||||||
|
if (route.controller) {
|
||||||
|
$controller(route.controller, {$scope: route.scope});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}];
|
}];
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,20 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
describe('$route', function() {
|
describe('$route', function() {
|
||||||
|
|
||||||
|
beforeEach(module(function() {
|
||||||
|
return function($rootScope, $controller) {
|
||||||
|
$rootScope.$on('$afterRouteChange', function(event, next) {
|
||||||
|
// emulate ng:view scope creation
|
||||||
|
if (next) {
|
||||||
|
next.scope = $rootScope.$new();
|
||||||
|
next.controller && $controller(next.controller, {$scope: next.scope});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}));
|
||||||
|
|
||||||
|
|
||||||
it('should route and fire change event', function() {
|
it('should route and fire change event', function() {
|
||||||
var log = '',
|
var log = '',
|
||||||
lastRoute,
|
lastRoute,
|
||||||
|
|
|
||||||
|
|
@ -633,6 +633,18 @@ describe('widget', function() {
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|
||||||
|
it('should create controller instance on $afterRouteChange event', inject(
|
||||||
|
function($route, $rootScope) {
|
||||||
|
var controllerScope;
|
||||||
|
$route.current = { controller: function($scope) { controllerScope = $scope; } };
|
||||||
|
$rootScope.$broadcast('$afterRouteChange', $route.current);
|
||||||
|
|
||||||
|
expect(controllerScope.$parent.$id).toBe($rootScope.$id);
|
||||||
|
expect(controllerScope.$id).toBe($route.current.scope.$id);
|
||||||
|
}
|
||||||
|
));
|
||||||
|
|
||||||
|
|
||||||
it('should load content via xhr when route changes', function() {
|
it('should load content via xhr when route changes', function() {
|
||||||
module(function($routeProvider) {
|
module(function($routeProvider) {
|
||||||
$routeProvider.when('/foo', {template: 'myUrl1'});
|
$routeProvider.when('/foo', {template: 'myUrl1'});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue