Question

这是我的index.html

<body ng-cloak>   
<div id="main">                        
<!-- angular templating -->              
<div ng-view=""></div>{{scrollTo}}
</div>

我有一个顶级菜单，我正在使用锚点。顶层菜单是从json文件生成的。

顶级菜单json文件的一部分：

   {
"menu": "About Me",    
"hrefs": "#/about",
"show": "true",
"menuitem": [
  {"submenu": "Research", "addresstoredirect": "#about?scrollTo=research"},
  {"submenu": "Education", "addresstoredirect": "#about?scrollTo=education"},
  {"submenu": "Career Awards", "addresstoredirect": "#about?scrollTo=careerawards"},
  {"submenu": "Visited Institutes", "addresstoredirect": "#about?scrollTo=visitedinstitutes"},
  {"submenu": "CV", "addresstoredirect": "#about?scrollTo=cv"}
]

}，这是anchorscroll的方法：

mainApp.run(function($rootScope, $location, $anchorScroll, $routeParams,$timeout) {
    $rootScope.$on('$routeChangeSuccess', function (event, toState, toParams, fromState, fromParams) {   
        if ($location.hash($routeParams.scrollTo)) {
        $timeout(function() {
            var hashId = $location.hash($routeParams.scrollTo);
            $anchorScroll();
            //TODO
        },3000);
        }});
    });

每个视图还包含从json文件下载的动态内容，例如这里是aboutView controller：

  mainApp.controller('aboutController', function ($scope, $http,$routeParams,$localStorage){
      if ($localStorage.message === "ENG")
      {                             
            $http.get('../app/assets/json/abouttxtEng.json').success(function(data) {
            $scope.aboutTexts = data;
      })}

and aboutView.html

        <h1>About View</h1>
        <p>{{ message }}</p>            
        <br>
        <br>
        <p>{{aboutTexts[0].aboutString[0]}}
        <p>{{aboutTexts[0].aboutString[1]}}
        <p>{{aboutTexts[0].aboutString[2]}}
        <br>
        <br>
        <p>{{aboutTexts[1].aboutString2[0]}}
        <p>{{aboutTexts[1].aboutString2[1]}}
        <p>{{aboutTexts[1].aboutString2[2]}}
        <a name="research"></a>
        <div id="research">
        <br>
        <br>
        <h3>This is research section of about page</h3>
        Research                    
        <p>{{aboutTexts[2].Research[0]}}
        <p>{{aboutTexts[2].Research[1]}}
        <p>{{aboutTexts[2].Research[2]}}
        </div>
        <a name="education"></a>
        <div id="education">

最后一块卡车。 abouttxtEng.json文件的一部分：

            [{
            "aboutString": 
            [
            "aboutText1ENG",
            "aboutText2ENG",
            "aboutText3ENG"
            ]
            },
            {
"aboutString2": 
            [
            "aboutText4ENG",
            "aboutText5ENG",
            "aboutText6ENG"
            ]
            },
            {
"Research" :
            [
            "ResearchText1ENG",
            "ResearchText2ENG",
            "ResearchText3ENG",
            "ResearchText4ENG"
            ]
            },
            {

所以问题是当我从$ rootScope。$ on中删除超时并点击topmenu上的任何锚点时，“跳转将被执行网站将被正确定位，但过了一会儿http.get将返回aboutText1ENG等，页面将当我使用超时（一切都很好）但是3秒只是我的假设。如果http.get工作得慢等怎么办。也许有一种方法可以在http.get完成后执行跳转之前等待？为了以防万一，我有第二个解决方案。我可以将整个内容放在* .js文件中并在index.html的开头加载它，但它适用于少量内容，而对于较大的内容则不然。某人可以帮帮我吗？ P.S不要打扰html这只是一个测试。

使用anchorscroll和http.get后跳转网页

0 个答案: