複数のコントローラまたはビューにng-modelがあります

Question

私のnavbarがnavbarコントローラにあるとしたら、別のコントローラで値の操作をしていますが、Navbarの値をどのように更新できますか？

は、ここで私はCTRL2コントローラの{{数}}更新したい、私は私の問題

http://jsfiddle.net/zmw43zdp/

<div ng-app="app"> 
    <div ng-controller="ctrl"> 
     {{number}} 
     <br><button ng-click="increment()">Increment</button> 
    </div> 

    <br> 
    <br> 

    <div ng-controller="ctrl2"> 
     {{number || 0}} 
    </div> 
</div> 

angular.module("app", []) 
.controller("ctrl", ["$scope", function($scope){ 
    $scope.number = 1; 
    $scope.increment = function(){ 
     $scope.number++; 
    } 
}]) 

.controller("ctrl2", ["$scope", function($scope){ 

}]); 

を表現するために作成した小さな例です。

Answer 1

間の共有データのきれいな方法は、常に角度サービスを使用しています。ここでは、私はあなたに基づいて変更されたコードです。基本的に

1. は、あなたは、あなたがセッターとゲッターとサービスの増分 機能を作るシングルトンであるサービスインスタンス
2. で共有したい、本当にデータを保存します。
3. そして、両方のコントローラからローカルの$ scope.number を削除します。
4. コントローラ内のデータに コントローラのデータをバインドする方法はありませんが、 メソッドを$ scopeにバインドして、 ビューのgetterメソッドを呼び出すことができます。

angular.module("app", []) 
 
    .factory("sharedModelService", function() { 
 
    var model = this; 
 
    var number = 0; 
 

 
    model.initNumber = function(value) { 
 
    \t return number = value; 
 
    } 
 
    
 
    model.getNumber = function() { 
 
     return number; 
 
    } 
 

 
    model.increment = function() { 
 
     return ++number; 
 
    } 
 

 
    return model; 
 
    }) 
 
    .controller("ctrl", ["$scope", "sharedModelService", function($scope, sharedModelService) { 
 
    sharedModelService.initNumber(1); 
 
    $scope.getNumber = sharedModelService.getNumber; 
 
    $scope.increment = function() { 
 
     sharedModelService.increment(); 
 
    } 
 
    }]) 
 

 
.controller("ctrl2", ["$scope", "sharedModelService", function($scope, sharedModelService) { 
 
    $scope.getNumber = sharedModelService.getNumber; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="ctrl"> 
 
    {{getNumber()}} 
 
    <br> 
 
    <button ng-click="increment()">Increment</button> 
 
    </div> 
 

 
    <br> 
 
    <br> 
 

 
    <div ng-controller="ctrl2"> 
 
    {{getNumber() || 0}} 
 
    </div> 
 
</div>

Answer 2

コントローラ内のメンバーを共有する必要があります。実際にそこにこれを達成するための別の方法ですが、私は次のように親コントローラを作成することをお勧め：

angular.module("app", []) 
.controller("parent", ["$scope", function($scope){ 
$scope.number = 0; 
}] 
.controller("ctrl", ["$scope", function($scope){ 
    $scope.number = 1; 
    $scope.increment = function(){ 
     $scope.number++; 
    } 
}]) 

.controller("ctrl2", ["$scope", function($scope){ 
    $scope.number= 1; 
}]); 

とhtmlで

：

<div ng-app="app" ng-controller="parent"> 
    <div ng-controller="ctrl"> 
     {{number}} 
     <br><button ng-click="increment()">Increment</button> 
    </div> 

    <br> 
    <br> 

    <div ng-controller="ctrl2"> 
     {{number || 0}} 
    </div> 
</div> 

これは私が信じて清楚な方法です。

Answer 3

Serviceを作成することを検討してください。このようなもの。

angular.module('app', []) 
    .controller('FirstController', ['$scope', 'CountingService', function($scope, CountingService) { 
    $scope.Increment = function() { 
     CountingService.Increment(); 
    }; 
    }]) 
    .controller('SecondController', ['$scope', 'CountingService', function($scope, CountingService) { 
    $scope.$watch(CountingService.GetNumber, function(number) { 
     $scope.number = number; 
    }); 
    }]) 
    .factory('CountingService', [function() { 
    var number = 0; 
    return { 
     GetNumber: function() { 
     return number; 
     }, 
     Increment: function() { 
     number++; 
     return number; 
     } 
    }; 
    }]); 

私はこのコードをテストしていませんが、あなたはそのアイデアを得ています。ここにはan example with more detailsがあります。