Angularjs：在控制器之間共享可觀察數據

Question

我需要在多個控制器中使用datacontext。
datacontext可以以不同的方式更改（通過ajax調用，由用戶/視圖，服務器）。
當datacontext中的數據發生更改時，應通知所有使用datacontext的控制器。

的DataContext：

var userDataContext = { firstName: "John", lastName: "Doe" }; 

我在每一個例子模擬後端變化與setTimeout的

setTimeout(function() { 
    console.log("change firstname"); 
    userContext.firstName= "Bart"; 
}, 3000); 

---

這裏是淘汰賽，它工作正常的小提琴例子。
http://jsfiddle.net/8ct0L1zu/4/

---

我也試圖與角做到這一點，但它部分地工作。

• 當我將完整的對象傳遞給控制器​​（通過引用）時，更改在控制器之間起作用。
  在javascript/backend中更改datacontext時，它不會更改我的視圖。
  

• 我也更喜歡在控制器範圍內只有名字和姓氏，而不是完整的對象。
  但在這種情況下，沒有任何工作。
  原因：在我們的應用程序中，會有大量的數據上下文與數組大對象。
  

http://jsfiddle.net/19xv3skn/1/

---

要真正讓它工作，我以前角與淘汰賽。數據綁定和數據上下文挖掘的角度。這工作正常，但我不太喜歡這個解決方案。
http://jsfiddle.net/7chp5xLa/2/

---

有一個最佳實踐或更好的方式與角度觀察到的一個的DataContext工作？

Answer 1

我認爲這個問題可能是您考慮在AngularJS應用程序中管理數據的方式。您正在編輯AngularJS生命週期之外的userContext數據。不要管理AngularJS「看到」什麼，而是在將數據提供給AngularJS後編輯數據。相反，請考慮在Angular內部更改userContext狀態，在那裏您需要它

在您的示例中，您有兩個控制器在$ scope上具有相同的數據，也許您應該參考管理數據的公共父控制器爲$範圍，而不是：

jsfiddle

app.controller('ParentCtrl', function ($scope, userContext, $timeout) { 
    $scope.firstName = userContext.firstName; 
    $scope.lastName = userContext.lastName; 
    $scope.user = userContext; 
    $timeout(function() { 
     console.log("change firstname"); 
     userContext.firstName= "Bart"; 
    }, 3000); 
}); 

，事情就當你想要做不同的事情，並與每個控制器的UserContext更有趣。在這種情況下，您可能需要根據您的需要在控制器之間進行一些同步。關於在控制器之間共享狀態和在控制器之間進行通信的問題有很多答案。

Answer 2

也許我沒有得到你所需要的正確，但是我建議你得到一看$broadcast

可以播放控制器之間的事件，因此，如果在controllerA數據的變化，然後controllerB可以聽和執行邏輯（反之亦然）當事件被解僱時。

這裏有一個解釋：http://mariuszprzydatek.com/2013/12/28/sharing-data-between-controllers-in-angularjs-pubsub-event-bus-example/

或一個骯髒的方式可以是使用$ rootScope來處理所有的應用程序相同的數據，所以當它改變它的工作流程無處不在改變。

希望它有幫助

Answer 3

你有幾個選項。

1-使用服務和廣播事件。

// service 
app.service("DataService", function($rootScope) { 
    var _name = ''; 
    var result = { 
     setName : function(name) { 
      _name = name; 
      $rootScope.$broadcast("nameChanged", _name); 
     }, 
     getName : function() { 
      return _name; 
     } 
    } 
    return result; 
}); 

// controller(s) 
app.controller("ObservingController", function($scope) { 
    $scope.$on("nameChanged", function(name) { 
     console.log("Something changed with name."); 
    }); 
}); 

// other controllers 
app.controller("ModifyingController", function($scope, DataService) { 
    // triggers the broadcast 
    DataService.setName("bob"); 
}); 

2）留意變化與表達

// controller - use the same DataService as above 
app.controller("WatchingController", function($scope, DataService) { 
    // bind the service to the scope for the expression 
    $scope.DataService = DataService; 
    $scope.$watch("DataService.getName()", function(newVal, oldVal) { 
     console.log("Name changed " + newVal); 
    }); 
}); 

這是給你，你喜歡什麼。我的服務也寫得很差，僅僅是一個例子。 $ rootScope僅用於向所有子範圍廣播。我不建議在那裏存儲數據。在數據上下文的情況下，如果將其包裝在服務中並公開，則可以將服務（或由服務公開的變量）綁定到示例中，並且您的手錶應觸發。

// service 
app.service("DataContextService", function() { 
    var context = { 
     firstName : "", 
     lastName : "" 
    }; 
    return { 
     context : context 
    }; 
}); 

// controller 
app.controller("Watcher", function($scope, DataContextService) { 
    $scope.context = DataContextService.context; 
    $scope.$watch("context.firstName", function(newVal, oldVal) { 
     console.log("Change.."); 
    }); 
}); 

app.controller("Modifier", function($scope, DataContextService) { 
    // causes the watch to trigger 
    DataContextService.context.firstName = "Bob"; 
});