在兩個控制器之間更新$ scope

Question

這很難解釋，但我會嘗試，請記住這一點。

我正在構建angularJS應用程序，並且遇到了更新UI的問題（$ scope）。

看到這裏

佈局，你可以看到有2個控制器，並在同一時間3個不同的$範圍。 例如，如果我在$ scope3中編輯「標題」，則「標題」也應該在$ scope2中更改。

什麼是監視更改並在控制器之間傳遞值並將其傳遞到$ scope.value或強制執行新的$ resource調用的最佳方法。

我完全迷失在這裏。

Answer 1

有多種方式可用。最好應根據範圍之間的關係來選擇，如果他們都在不同的模板或模塊等

的方式首先是創建可以存儲必要的值中介服務。這個中介服務可以被注入任何需要的地方 - 控制器，其他服務，指令。

模板1在模塊1

<div ng-controller="Ctrl1"> 
    <input type="text" ng-model="val">{{ val }} 
</div> 

控制器1在模塊1

app.controller('Ctrl1', ['$scope', 'ValMediator', function($scope, ValMediator) { 
$scope.val = ''; 

$scope.$watch(
    function(){ 
    return ValMediator.getVal(); 
    }, 
    function(newVal){ 
    $scope.val = newVal; 
    } 
); 

$scope.$watch('val', 
    function(newVal){ 
    ValMediator.setVal(newVal); 
    } 
); 

}]); 

模板2在模塊2

<div ng-controller="Ctrl2"> 
    <input type="text" ng-model="val">{{ val }} 
</div> 

控制器2在模塊2

app.controller('Ctrl2', ['$scope', 'ValMediator',function($scope, ValMediator) { 
    $scope.val = ''; 

    $scope.$watch(
    function(){ 
     return ValMediator.getVal(); 
    }, 
    function(newVal){ 
     $scope.val = newVal; 
    } 
); 

    $scope.$watch('val', 
    function(newVal){ 
     ValMediator.setVal(newVal); 
    } 
); 

}]); 

中介服務

app.factory('ValMediator', function() { 
    var val = ''; 
    return { 
    setVal: function(newVal){ 
     val = newVal; 
    }, 
    getVal: function(){ 
     return val; 
    } 
    }; 
}); 

請參閱本 first jsBin exampleValMediator是內部存儲該val變量並暴露getter和setter作爲一個公共接口這樣的服務的一個例子。其他控制器可以注入並使用。通過在服務獲取器上使用$scope.$watch，所有外部更改都將被放入本地$scope。觀看本地val用於通過中介服務向其他消費者發佈本地更改。

=====================

另一種方法是發出通過$rootScope事件。我不認爲應該使用這種方法，因爲它會將rootScope與不必要的事件混爲一談。然而，它是跨模塊/範圍通信的一種有效的方法，並應考慮到。

請參考second jsBin example

這裏調解員的作用採取的是這是用來只是作爲一個事件輸送的介質$rootScope服務。模板是相同的，但控制器不要求別的，然後$scope和$rootScope通訊：

控制器1個模塊1

app.controller('Ctrl1', ['$scope', '$rootScope', function($scope, $rootScope) { 
    $scope.val = ''; 

    $scope.$on('Val/update', function(e, arg){ 
    console.log('val update 1', arg); 
    $scope.val = arg; 
    }); 

    $scope.$watch('val', 
    function(newVal, oldVal){ 
     if (newVal === oldVal) return; 
     $rootScope.$broadcast('Val/update', newVal); 
    } 
); 

}]); 

控制器2模塊2

app.controller('Ctrl2', ['$scope', '$rootScope',function($scope, $rootScope) { 
    $scope.val = ''; 

    $scope.$on('Val/update', function(e, arg) { 
    console.log('val update 2', arg); 
    $scope.val = arg; 
    }); 

    $scope.$watch('val', 
    function(newVal, oldVal) { 
     if (newVal === oldVal) return; 
     $rootScope.$broadcast('Val/update', newVal); 
    } 
); 

}]); 

這是它第二例如 - 對變化事件做出反應併發布自己的更新