Angular JS控制器範圍，多視圖

對於儀表板類型項目（一個頁面，不同模型的多個較小視圖），我們正在使用Angular框架的其他工具。Angular JS控制器範圍，多視圖

問題由以下部分組成：

我有一個控制器，它負責檢索工作項數據。目前，工作項目數據由bugamount和backlogitems組成。
我有2個功能在這個控制器負責更新範圍變量（bugAmount和backLogItems）
我有2個html文件作爲視圖。這些都包含在主dashboard.html（基本上是一個隨機的地方）。

我現在的問題是，視圖不共享具有鏈接到workItemController的控制器指令的共同祖先。我可以做到這一點，它會完美的工作，但是這嚴重減少了佈局的可能性。

基本上問題：每個視圖現在都有ng-controller屬性，因爲它們都需要訪問範圍。這不起作用，只有其中一個視圖被更新。

僅供參考這些兩個div應該能夠在頁面上的任何地方locatd，並且應該有自己的共享數據訪問（其中ontroller用品）

<div class="backLogView" ng-controller="WorkItemsController"> 
... 
        <tr data-ng-repeat="b in backLogItems"> 
         <td class="text-left">{{b.title}}</td> 
         <td class="text-left">{{b.status}}</td> 
         <td class="text-left">{{b.assignedTo}}</td> 
        </tr> 

... 
</div> 

<div class="bugAmountView" ng-controller="WorkItemsController"> 
... 
{{BugAmount}} 
... 
</div>

到目前爲止，我認爲：

創建使用ng-controller指令的雙親，而不是單獨的視圖。這是一個選項，但會嚴重減少視圖的位置（就我而言，這是一個很大的禁止）
使用$ rootscope作爲控制器，發佈時將當前作用域更新爲$ rootcope。工作項目。這可能會起作用，但意味着每個控制器都可以訪問其他每個控制器的數據。在我看來，不可能是正確的

是否有一個很好的方式仍然有一個控制器中的鏈接功能（它應該），但在網頁中顯示其數據的視圖（bugamount和backlog）他們沒有共同的祖先。

來源

2013-11-26 Edim

您可以考慮使用可注入每個控制器的服務。由於該服務基本上是單身人士，該服務中包含的數據將在控制器之間共享。

你甚至可以將它分配給控制器的本地$範圍。

例如

var YourApp = angular.module['YourAppName']; 

YourApp.factory('YourServiceName', [function(){ 
    return { 
     var1: '', 
     var2: '', 
     var3: '' 
}]);

所以在你的控制器中，你可以注入'YourServiceName'。您可以將數據分配給屬性，並且可以在也注入服務的其他控制器中訪問它們。如果添加到$範圍，更改將反映在您的視圖中。

所以，對於「WorkItemsController」，你可以有這樣的：

YourApp.controller('WorkItemsController', ['$scope', 'YourServiceName', function($scope, YourServiceName){ 
    $scope.ServiceData = YourServiceName; 
}]);

因此，在你的意見，你可以訪問ServiceData.var1等，如果這些數據是通過該服務在其他地方更新，它會自動反映你的看法。

這樣你就可以在範圍之間共享數據而不依賴於共享父級或使用$ rootcope。

使用該服務，您甚至可以將檢索原始數據的功能移動到服務中，並將它們放在一起。數據檢索仍然可以由控制器觸發，但通過對服務的方法調用，服務更新其視圖中可訪問的屬性。

來源

2013-11-26 18:09:33 jpmcc

謝謝！我讀過關於服務的問題，你的解釋是我需要的後面的推動。信息技術仍然不完美，但我確實解決了所有的問題。我可以加載2個獨立的HTML文件作爲視圖，都使用相同的控制器，並通過用作單例數據提供程序的服務訪問共享數據。 – Edim

我仍然對Angular感到滿意 – jpmcc

我增加了另一種可能性。如果你想動態刷新你的視圖，服務答案不會這樣做。您必須使用events：$ emit/$ broadcast，以便可以刷新所有依賴於這些數據的視圖。

檢查Working with $scope.$emit and $scope.$on瞭解更多信息。

來源

2016-03-01 16:17:46 Walfrat

Angular JS控制器範圍，多視圖

回答

相關問題