ng-model через несколько контроллеров или представлений

Question

Представьте, что мой navbar находится на контроллере navbar, и я делаю что-то манипулирование значениями на другом контроллере, как я могу обновить значение моего навигатора?

Вот небольшой пример, который я создал, чтобы выразить мою проблему

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){ 

}]); 

Я хочу, чтобы обновить {{номер}} контроллера Упр 2.

Answer 1

Чистый способ обмена данными между ними всегда использует функцию углового обслуживания. Вот код, который я изменил на основе вашего примера. в основном

1. вы сохраните действительно данные, которые вы хотите принять участие в экземпляре службы
2. которая одноточечно тогда вы делаете и присваивателя и функции приращения в службе.
3. И вы удаляете локальный $ scope.number с обоих контроллеров.
4. Нет никакого способа привязать данные в контроллере к данным в службе, но вы можете привязать метод getter к $ 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.