在Angular中同步多個視圖

在過去的幾天裏，我們一直在爲我們的REST服務編寫一個基於angular.js的新前端。到目前爲止，事情正在順利進行，並且我們已經建立了許多小頁面和組件。在Angular中同步多個視圖

我們現在開始把這些東西整合成一個完整的應用程序，但是不知道如何處理基於兩種不同的菜單的主視圖。

我們希望所有這三個組件都基於某種全局狀態進行更改。理想情況下由基於url的$routeProvider控制。

我們可以想到幾種方法來做到這一點。然而，他們中沒有一個看起來是正確的，我們沒有找到關於角度開發人員如何設想完成的明確文檔。

有些降低片段：

的index.html

<!DOCTYPE html> 
<html data-ng-app="myapp"> 
<head> 
    ....snip... 
</head> 
<body> 
    <div id="system-menu" data-ng-controller="MenuCtrl" data-ng-include="'partials/menu/system.html'"></div> 
    <div id="main"> 
     <div id="main-menu" data-ng-controller="MenuCtrl" data-ng-include="'partials/menu/main.html'"></div> 
     <div id="content" data-ng-view></div> 
    </div> 
</body>

app.js

var myapp = angular.module('myapp', ['ngResource', 'ui']). 
    config(['$routeProvider', function($routeProvider) { 
     $routeProvider. 
      when('/messages', { 
       templateUrl: 'partials/messages.html', 
       controller: MessagesCtrl 
      }). 
      when('/messages/:messageId', { 
       templateUrl: 'partials/messages.html', 
       controller: MessagesCtrl 
      }). 
      ...snip... 
      otherwise({ 
       redirectTo: '/messages' 
     }); 
    }]);

當用戶點擊的鏈接/消息/ 1我想控制器messagesCtrl是用於視圖。這很容易，並且如上所述發揮作用。不過，我的MenuCtrl不會「注意」這種情況發生，並且手動廣播一條消息讓它知道頁面變化，因此它可以顯示子菜單對我來說似乎很難看。因爲這條消息的唯一原因是更新菜單導致對其他控制器不需要的知識。

到目前爲止，我們喜歡上angular.js的文檔，但似乎缺乏在大畫面的部門。

任何人都可以向我們提供的慣用的方式做到這一點的鏈接或一些指針？

來源

2012-11-16 martijnve

我們希望所有這三個組件都基於一些全局狀態進行更改。由路由提供者根據網址進行理想控制。

要在控制器之間進行通信，您可以創建一個服務，該服務可以將更改廣播到其所有訂戶。

結帳視頻

http://www.youtube.com/watch?v=1OALSkJGsRw

來源

2012-11-16 15:28:00 venkat

這很好地解釋了控制器間的通訊，謝謝。然而，它並沒有以一種乾淨的方式解決我的問題。讓我試着更具體：當用戶點擊鏈接到/消息/ 1我希望控制器messagesCtrl用於視圖。這很容易，並且如上所述發揮作用。然而，我的MenuCtrl並沒有「注意到」這種情況發生，並手動廣播一條消息讓它知道頁面變化，因此它可以顯示子菜單對我來說似乎很難看。因爲這條消息的唯一原因是更新菜單導致對其他控制器不需要的知識。 – martijnve

爲了讓您的菜單高亮以下YouTube視頻和jsfiddles環節的工作你可以設置你的菜單控制器內的簡單方法，從讀出當前路由。在$location提供商（快速輕慢）

// Within your controller. 
$scope.isActiveUrl = function (route) { 
    return route === $location.path() 
} 
// 
Within the view 
ng-class="{ 'active' : isActiveUrl('your/path') }"

另見： How to highlight a current menu item?

來源

2013-08-19 19:23:30 ngr

Venkat是正確的 - 使用服務。您需要在MenuCtrl中設置一個關於正在改變的事件的手錶，以便它能夠注意到這一變化。該事物可以是您公開的服務的屬性，也可以是服務中函數的返回值。

當用戶點擊鏈接並且您在第一個控制器中時，在服務中設置一些指示菜單狀態的內容。這個元素就是你想要在你的輔助控制器中放置一個監視器。然後，當這種變化發生時，級聯效應是次級控制器中的操作將會觸發，並且您可以根據您剛剛設置的值執行任何操作。

顯然，您需要將這些服務注入到您的兩個控制器中。

來源

2013-08-19 19:41:30 BoxerBucks

在Angular中同步多個視圖

回答

相關問題