使用Angular JS加载无限模板

时间:2013-04-15 14:32:30

标签: angularjs

我正在使用AngularJS,当我开始使用routeprovider时,如果我重新加载页面会发生无限负载。

这很有趣,因为当我第一次尝试加载主页面时,页面开始正常。

这是我的代码:

var app = angular.module("platwip", []);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/status', {templateUrl: 'resources/views/html_files/status/status.dust',   controller: TestCtrl}).
    when('/network/wan', {templateUrl: '/resources/viewsAngular/network/wanAngular.html', controller: WanCtrl}).        
    otherwise({redirectTo: '/status'});
 }]);

 app.run(function($templateCache,$http){
    $http.get('resources/viewsAngular/menus/sideMenu.html', {cache:$templateCache});
    $http.get('resources/viewsAngular/menus/topMenu.html', {cache:$templateCache});
 });

我的Html:

<!DOCTYPE html>
<html ng-app="platwip">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link media="screen" type="text/css" rel="stylesheet" href="/resources/css/estilo.css"></link>
    <script src="/resources/js/jquery/jquery-1.8.1.min.js" ></script>
    <script src="/resources/js/jquery/jquery.i18n.min.js" ></script>
    <script src="/src/controller/main/main.ws/messages" ></script>
    <script src="/resources/js/jquery/jquery-ui-1.8.23.custom.min.js" ></script>
    <script src="/resources/js/jquery/jquery.input-ip-address-control-1.0.min.js" ></script>
    <script src="/resources/js/jquery/jquery.date.format.js" ></script>
    <script src="/resources/js/jquery/jquery.address-1.5.min.js" ></script>
    <script src="/resources/js/jquery/jquery.maskedinput-1.3.min.js" ></script>
    <script src="/resources/js/jquery/jquery.validate.min.js" ></script>
    <script src="/resources/js/validator_rules.js" ></script>
    <script src="/resources/js/jquery/jquery.tablesorter.min.js" ></script>
    <script src="/resources/js/angular/angular.min.js" ></script>
    <script src="/resources/js/angular/controllers.js" ></script>
    <script src="/resources/js/angular/partials.js" ></script>
    <script src="/resources/js/angular/filters.js" ></script>
    <script src="/resources/js/dust/dust-full-1.2.0.js" ></script>
    <script src="/resources/js/dust/dust-helpers-1.1.1.js" ></script>
    <script src="/resources/js/main.js" ></script>

</head>
<body>
        <!-- <div id="qunit"></div>
        <div id="qunit-fixture"></div> -->
        <div id="container">
            <div id="cabecalho">
                <div id="barraSuperior"></div>
                <div id="menuSuperior" ng-include src="'resources/viewsAngular/menus/topMenu.html'"/>
                </div>
            </div>
            <noscript >
                {{'Ops!! Seu navegador não está com o JavaScript habilitado. Para utilizar a aplicação você deve habilitar o JavaScript.' | i18n}}
                <style type="text/css">
                #conteudo { display:none; }
                </style>
            </noscript>
            <div id="conteudo">
                <div id="menuLateral" ng-include src="'resources/viewsAngular/menus/sideMenu.html'">
                </div>
                <div class="content">
                    <div id="titulo">
                        <h1></h1>
                    </div>
                    <div id='conteudoWeb' ng-view>

                        <div class='tab'>

                        </div>

                    </div>
                </div>
                <div class="clear"></div>                   
            </div>
        </div>
    </body>
    </html>

有人知道这是什么问题吗?

谢谢!

1 个答案:

答案 0 :(得分:1)

解决。

我有一个JS文件(main.js),它有一个函数,它正在循环我的应用程序加载。 在我放入Angular之后,选择器变量每次都在改变。

功能是:

var browserHistory = function(){
    $.address.init().change(function(event){
        var selector = "[rel='address:" + event.value + "']";
        var link = $(selector);         
        if(link.length > 0)
            loadContent(link);
        else
            $.address.value("/");
    });

};

坝。

再见!