Aktualisieren eines Controllers von einem anderen Controller in Angular

Question

Damit zwei Controller in Angular miteinander kommunizieren können, wird empfohlen, einen gemeinsamen Dienst zu erstellen, der für beide Controller zugänglich ist. Ich habe versucht, dies in einem sehr einfachen fiddle zu veranschaulichen. Je nachdem, welche Schaltfläche Sie drücken, soll die App die Nachricht unter den Schaltflächen anpassen.

Warum funktioniert das nicht? Fehle ich etwas offensichtlich oder grundlegender?

HTML

<div ng-controller="ControllerOne"> 
    <button ng-click="setNumber(1)">One</button> 
    <button ng-click="setNumber(2)">Two</button> 
</div> 
<div ng-controller="ControllerTwo">{{number}} was chosen!</div> 

JavaScript

var app = angular.module('app', []); 

app.factory("Service", function() { 
    var number = 1; 
    function getNumber() { 
    return number; 
    } 
    function setNumber(newNumber) { 
    number = newNumber; 
    } 
    return { 
    getNumber: getNumber, 
    setNumber: setNumber, 
    } 
}); 

function ControllerOne($scope, Service) { 
    $scope.setNumber = Service.setNumber; 
} 

function ControllerTwo($scope, Service) { 
    $scope.number = Service.getNumber(); 
} 

Answer 1

Versuchen Sie, eine Uhr in Ihrem Controller zu erstellen:

$scope.$watch(function() { return Service.getNumber(); }, 
    function (value) { 
     $scope.number = value; 
    } 
); 

Hier ist eine Arbeits Geige http://jsfiddle.net/YFbC2/

Answer 2

Scheint wie Problem mit property that holds a primitive value. So können Sie diese Änderungen vornehmen:

app.factory("Service", function() { 
    var number = {val: 1}; 
    function getNumber() { 
     return number; 
    } 
    function setNumber(newNumber) { 
     number.val = newNumber; 
    } 
    return { 
     getNumber: getNumber, 
     setNumber: setNumber, 
    } 
}); 

Siehe fiddle

Answer 3

Rufen Sie einfach in HTML Service.getNumber() und in Controller ControllerTwo Anruf-Service wie:

$scope.Service = Service; 

Beispiel:

HTML

<div ng-controller="ControllerOne"> 
    <button ng-click="setNumber(1)">One</button> 
    <button ng-click="setNumber(2)">Two</button> 
</div> 
<div ng-controller="ControllerTwo">{{Service.getNumber()}} was chosen!</div> 

JS

function ControllerOne($scope, Service) {  
    $scope.setNumber = Service.setNumber; 
} 

function ControllerTwo($scope, Service) { 
     $scope.Service = Service; 
} 

Demo Fidlle