2015-09-23 196 views
0

我有一個頁面使用角度ui路由器在同一頁面上呈現兩個視圖。 我最終需要在phonegap/cordova下運行此操作,因此必須引導角度到deviceready事件上的元素。Angularjs ui路由器事件

我設法將代碼封裝到一個函數中,並且當函數在頁面末尾調用時,它工作正常。

但是,如果在window.onload或文檔就緒事件上調用了相同的函數,它將無法工作。事實上,如果在頁面加載後從javascript控制檯本身調用該函數,它只是無法工作。

需要幫助瞭解到底發生了什麼問題。

代碼如下

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<script src="js/jquery-2.1.4.min.js"></script> 
<script src="js/angular.js"></script> 
<script src="js/angular-ui-router.min.js"></script> 
<script> 

</script> 
</head> 
<body> 
<div ui-view="appview"> appview  </div> 
<div ui-view="msgview"> messageview s</div> 
<script> 

var routerApp; 
var appViews = ['appview','msgview']; 


function zero() 
{ 
    routerApp= angular.module('routerApp', ['ui.router']); 
    x=$("body").attr("ng-app","routerApp");  
    for(var i=0;i<appViews.length;i++) 
    { 
     angular.bootstrap($("#" + appViews[i]), ["routerApp"]); 
    } 

    routerApp.config(function($stateProvider, $urlRouterProvider) 
    { 
     $urlRouterProvider.otherwise('/messaging'); 
     $stateProvider 
     .state('messaging', 
     { 
      url: '/messaging', 
      views: 
      { 
       '':{templateUrl:'http://geo.tikoo.com/app/components/messaging/phone/messaging.html'}, 
       'msgview': 
       { 
        templateUrl: 'http://geo.tikoo.com/app/components/messaging/phone/messaging.html', 
        controller: 'messC' 
       } 
      } 

     }); 

    }); 
routerApp.controller('messC', function($scope) { 

     $scope.username = 'Tom'; 
    }); 
} 
zero(); 
//window.onload=zero; 
//$(document).ready(function(){zero();}); 



</script> 
</body> 
</html> 

回答

0

想通了一些嘗試之後。

這是需要做的。 1.路由器需要先設置。 2.元素上ng-app的屬性需要下一步設置。 3.一個angular.element(element).ready事件需要引導以引導

理解。 如果沒有設置路由器,那麼引導失敗(明顯) ng-app動態添加也需要路由器設置(有趣的是,chrome可以以任何順序工作,但移動瀏覽器/歌劇需要路由器在屬性前先設置ng-app被分配給一個元素)。

組路由器==>添加NG-應用屬性,元素==>引導

希望這有助於