Angularjs事件和異步模塊加載

我的事件和偵聽器上的我的angularjs應用程序有問題。Angularjs事件和異步模塊加載

我的應用程序有一個index.html文件是這樣的：

<body ng-app="ua.myApp"> 
    <!-- Navigation bar --> 
    <ng-include src="'app/common/navbar/navbar.tpl.html'"></ng-include> 
    <ng-view></ng-view> 

    <script type="text/javascript" src="app/common/navbar/navbar.js"></script> 
    <script type="text/javascript" src="app/part1/part1.js"></script> 

</body>

在導航欄控制器我有一個聽衆：

console.log('Setup event listner - navBar: update'); 
$scope.$on('navBar: update', function() { 
    if (uaContext.loginStatus.get() == true) { 
     $scope.setLoggedInBar(); 
    } else { 
     $scope.setLoggedOutBar(); 
    } 
});

而在第一部分應用程序，我播送活動：

function ($scope, $rootScope, $routeParams, uaContext) { 
    console.log('Send event listner - navBar: update'); 
    $scope.$on('$routeChangeSuccess', function() { 
     uaContext.productId.set($routeParams.productId); 
     uaContext.appName.set('part 1'); 
     $rootScope.$broadcast('navBar: update'); 
    }); 
}

myApp中的依賴關係按以下順序排列：

var myApp = angular.module('ua.myApp', [ 
    'ua.NavBar', 
    'ua.Part1']);

它工作正常。控制檯日誌：

Setup event listner - navBar: update (nav_bar.js) 
Send event listner - navBar: update (part1.js)

的問題是，有時該事件由part1的應用程序發送之前，在導航欄聽者操作。所以我們得到這種情況：

Send event listner - navBar: update (part1.js) 
Setup event listner - navBar: update (nav_bar.js)

因此導航欄不更新。

你知道我該如何解決這個問題嗎？也許我可以在routeChangeSuccess之外的事件中發出事件，但我沒有找到有關事件的文檔。

謝謝

來源

2013-08-25 Julio

你可以聆聽到適用於在ng-include設置的$scope的$includeContentLoaded事件。

另一個解決方案，而不是依靠時間事件，是create a service，可以注入到兩個控制器，可用於共享兩者之間的導航狀態。這樣，即使事件在導航控制器實例化之前觸發，導航欄控制器也可以從共享服務中讀取適當的狀態。

來源

2013-08-28 00:41:22 jandersen

事實上，由於uaContext服務，數據已經被共享。一種解決方案可能是在該服務的變量上添加監視，但我將不得不在服務中使用多個變量。那麼我將不得不監視服務中要求的所有元素？這是最好的方法嗎？ – Julio

你已經有了一份服務，很好的工作！是的，我認爲如果你有不同的觀點需要回應該服務的變量（狀態），那麼將這些視爲可以觀看的服務的屬性是合理的方式。 – jandersen

好的，但觀看服務中的幾個變量是否有效？我有10個變量需要觀察。一種解決方法是在該服務中添加一個變量'modified'，並在服務中的每個變量修改後對其進行修改。然後我將能夠觀看這個變量。另一個解決方法是使用事件。但是如果包含的導航欄在廣播後加載，我無法捕捉到該事件。 'includeContentLoaded'事件無法解決這個問題，因爲我必須將事件從ng-view Part1發送到包含的組件nav-bar – Julio

Angularjs事件和異步模塊加載

回答

相關問題