Как изменить значение $ rootScope в функции ng-click?

Question

Я пытаюсь изменить значение $rootScope.name, которое я установил в контроллере другой функцией в другом контроллере, но когда я получаю доступ к $rootScope.name в другом контроллере, значение остается таким же, как оно было установлено. Например:

app.controller('homectrl', function($scope, $rootScope){ 

$rootScope.name = "joshua"; 

}) 

app.controller('aboutctrl', function($scope, $rootScope){ 

$scope.send = function(newname) 
{ 
$rootScope.name = newname; 
} 

}) 

app.controller('servicectrl', function($scope, $rootScope){ 

console.log($rootScope.name); // this outputs joshua instead of new name set in send function in about controller 

}) 

Answer 1

Вы не можете нажать на кнопку, которая вызывает метод send() достаточно быстро, чтобы сделать servicectrl выход нового имени. если вы действительно хотите увидеть, что находится в $rootScope.name после того, как вы нажали кнопку, вы должны увидеть значение или $ смотреть его, например. путем изменений servicectrl так:

$rootScope.$watch('name', function(newname) { 
    console.log($rootScope.name); 
}); 

Answer 2

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

Вот рабочий пример:

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

 
app.controller('homectrl', function($scope, NameService){ 
 

 
    $scope.name = NameService.name; 
 
    
 
    $scope.$watch(function(){return NameService.name}, function(newValue, oldValue){ 
 
    $scope.name = newValue; 
 
}); 
 
    
 
}); 
 

 
app.controller('aboutctrl', function($scope, NameService){ 
 

 
    $scope.name = NameService.name; 
 
    
 
    $scope.send = function(newname){ 
 
    NameService.changeName($scope.name); 
 
    console.log('New name!', $scope.name); 
 
    } 
 

 
}); 
 

 
app.factory('NameService', function(){ 
 

 
    return { 
 
    name : 'joshua', 
 
    changeName : function(newName){ 
 
     this.name = newName; 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 

 
    <div ng-controller="homectrl"> 
 
    <h3>Home Controller </h3> 
 
    <p>{{name}}</p> 
 
    </div> 
 
    
 
    <hr> 
 
    
 
    <div ng-controller="aboutctrl"> 
 
    <h3>About Controller </h3> 
 
    <input type="text" ng-model="name" /> 
 
    <button ng-click="send($scope.name)">Change</button> 
 
    </div> 
 

 

 
</div>