如何在ng-click函數中更改$ rootScope值？

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 ，則應觀察該值或$ watch它，例如。 通過像這樣更改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>