понимание сферы контроллера в angularJS

Question

Рассмотрим два Div области, как следует, в HTML файл

<div class="divArea1" ng-controller="myController"> 
    <input ng-click="updateName()" type="button" value="button"/> 
</div> 

<div class="divArea1" ng-controller="myController"> 
    <p>{{name}}</p> 
</div> 

Ниже угловой JS пример

productApp.controller("myController", [ '$scope', function($scope) { 
    $scope.name= "XYZ"; 
    $scope.updateName= function() { 
     $scope.name = "ABC"; 
    }; 
} ]); 

проблема, когда я пытаюсь изменить имя, после нажатия кнопки обновления он не отображается во втором в области div. Есть ли какая-то ошибка, которую я делаю.

Answer 1

контроллеров не одиночки. Каждый раз, когда у вас есть новый контроллер, у вас есть новый экземпляр этого контроллера с новой изолированной областью.

Если вам необходимо обмениваться данными между контроллерами, вы должны использовать фабрику (которая является одноэлементной).

angular.module('app').factory('mySharedData', function(){ 
    var service = { 
     object : objectToShare 
    }; 

    var objectToShare = {}; 

    return service; 
}); 

И от контроллера:

angular.module('app').controller('myController', 
    ['$scope','mySharedData', 
    function($scope, mySharedData){ 
     $scope.someObject = mySharedData.object; 
     $scope.updateName= function() { 
      $scope.someObject.name = "ABC"; 
     }; 
    } 
]); 

А с вашей точки зрения:

<div class="divArea1" ng-controller="myController"> 
    <input ng-click="updateName()" type="button" value="button"/> 
</div> 

<div class="divArea1" ng-controller="myController"> 
    <p>{{someObject.name}}</p> 
</div> 

Примечание: Я инкапсулированные свойство имени в объект, потому что объекты передаются по ссылке, и строки по значению. Это позволяет вам проще делиться своими значениями и автоматически обновлять его в службе и других контроллерах без необходимости доступа к вашему свойству через аксессоров.

Answer 2

У вас есть два разных контроллера (с двумя отдельными областями) с тем же именем.

Вы должны поместить контроллер в родительском контроллере, чтобы сохранить имя в том же объеме, как и кнопки:

<div id="container" ng-controller="myController"> 
    <div class="divArea1"> 
     <input ng-click="updateName()" type="button" value="button"/> 
    </div> 

    <div class="divArea1"> 
    <p>{{name}}</p> 
    </div> 
</div> 

Answer 3

здесь демо http://jsfiddle.net/wg7pb1yu/3/ инъекционные $ rootScope так, что он будет делать из глобального масштаба

productApp.controller("myController", [ '$scope','$rootScope', function($scope, $rootScope) { 
$rootScope.name= "XYZ"; 
$scope.updateName= function() { 
    $rootScope.name = "ABC"; 

};} ]); 

Надеется, что это поможет вам