Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-22 05:11:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(docModuleComponents): implement anchor scroll when content added

Browse source 
When navigating to URLs such as
docs.angularjs.org/api/ng#filter, the browser
was not able to navigate to the named anchor,
"filter," because the anchor did not yet exist
in the DOM.

This fix uses the $anchorScroll service
to automatically scroll to the right place when
the content has been added to the page.

Fixes #4703
This commit is contained in:
Jeff Cross 2013-11-06 10:19:36 -08:00
parent 56d0917799
commit eb51b024c9
1 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
docs/src/templates/js/docs.js
View file

@ -207,28 +207,29 @@ docsApp.directive.sourceEdit = function(getEmbeddedTemplate) {
} }
}; };
docsApp.directive.docModuleComponents = ['sections', function(sections) { docsApp.directive.docModuleComponents = function() {
return { return {
template: ' <div class="component-breakdown">' + template: ' <div class="component-breakdown">' +
' <h2>Module Components</h2>' + ' <h2>Module Components</h2>' +
' <div ng-repeat="(key, section) in components">' + ' <div ng-repeat="(key, section) in components">' +
' <h3 class="component-heading" id="{{ section.type }}">{{ section.title }}</h3>' + ' <h3 class="component-heading" id="{{ section.type }}">{{ section.title }}</h3>' +
' <table class="definition-table">' + ' <table class="definition-table">' +
' <tr>' + ' <tr>' +
' <th>Name</th>' + ' <th>Name</th>' +
' <th>Description</th>' + ' <th>Description</th>' +
' </tr>' + ' </tr>' +
' <tr ng-repeat="component in section.components">' + ' <tr ng-repeat="component in section.components">' +
' <td><a ng-href="{{ component.url }}">{{ component.shortName }}</a></td>' + ' <td><a ng-href="{{ component.url }}">{{ component.shortName }}</a></td>' +
' <td>{{ component.shortDescription }}</td>' + ' <td>{{ component.shortDescription }}</td>' +
' </tr>' + ' </tr>' +
' </table>' + ' </table>' +
' </div>' + ' </div>' +
' </div>', ' </div>',
scope : { scope : {
module : '@docModuleComponents' module : '@docModuleComponents'
}, },
controller : ['$scope', function($scope) { controller : ['$scope', '$anchorScroll', '$timeout', 'sections',
function($scope, $anchorScroll, $timeout, sections) {
var validTypes = ['property','function','directive','service','object','filter']; var validTypes = ['property','function','directive','service','object','filter'];
var components = {}; var components = {};
angular.forEach(sections.api, function(item) { angular.forEach(sections.api, function(item) {
@ -239,16 +240,17 @@ docsApp.directive.docModuleComponents = ['sections', function(sections) {
components[type] = components[type] || { components[type] = components[type] || {
title : type, title : type,
type : type, type : type,
components : [] components : []
}; };
components[type].components.push(item); components[type].components.push(item);
} }
} }
}); });
$scope.components = components; $scope.components = components;
$timeout($anchorScroll, 0, false);
}] }]
}; };
}] };
docsApp.directive.docTutorialNav = function(templateMerge) { docsApp.directive.docTutorialNav = function(templateMerge) {
var pages = [ var pages = [
@ -411,7 +413,7 @@ docsApp.serviceFactory.prepareDefaultAppModule = function() {
var moduleName = 'App'; var moduleName = 'App';
return { return {
module : moduleName, module : moduleName,
script : "angular.module('" + moduleName + "', [" + script : "angular.module('" + moduleName + "', [" +
(deps.length ? "'" + deps.join("','") + "'" : "") + "]);\n\n" (deps.length ? "'" + deps.join("','") + "'" : "") + "]);\n\n"
}; };
}; };
@ -709,7 +711,7 @@ docsApp.controller.DocsController = function($scope, $location, $window, $cookie
error: 'Error Reference' error: 'Error Reference'
}; };
populateComponentsList(); populateComponentsList();
$scope.$watch(function docsPathWatch() {return $location.path(); }, function docsPathWatchAction(path) { $scope.$watch(function docsPathWatch() {return $location.path(); }, function docsPathWatchAction(path) {
// ignore non-doc links which are used in examples // ignore non-doc links which are used in examples