Javascript AngularJs引用另一个中的范围变量

我正在开发一个用于演示的简单应用程序，我有以下问题：我的控制器中有两个对象（凭据和authServer），我想引用authServer对象中的凭据属性。这两个scope.credential属性都绑定到输入字段，但在我的authServer对象中更改时不会更新它们

我知道我可以用$watch实现这一点，但我正在寻找一种更优雅的方式

var app = angular.module('clientApp', []);
app.controller('myCtrl', function($scope) {
    $scope.credentials = {
      'username': null,
      'password' : null
    };

    $scope.authServer = {
      'url' : 'http://localhost:9000/auth', 
      'request' : {
        'grant_type': null,
        'scope': null,
        'client_id': null,
        'client_secret': null, 
        'username' : $scope.credentials.username,
        'password' : $scope.credentials.password
      }
    };
});

---

将此部分更改为以下内容

$scope.authServer = {
  'url' : 'http://localhost:9000/auth', 
  'request' : {
    'grant_type': null,
    'scope': null,
    'client_id': null,
    'client_secret': null, 
    'username' : $scope.credentials.username,
    'password' : $scope.credentials.password
  }
};

您希望引用“$scope.credentials”，因为这是一个对象，对象通过引用传递，其中$scope.credentials.username通过值传递

$scope.authServer = {
  'url' : 'http://localhost:9000/auth', 
  'request' : $scope.credentials
};

$scope.authServer.request['grant_type'] = null;
$scope.authServer.request['scope'] = null;
$scope.authServer.request['client_id'] = null;
$scope.authServer.request['client_secret'] = null;

解决方案1 仅当需要使用时才设置

$scope.authServer

其值

$scope.doRequest = function() {
  $scope.authServer = {
  'url' : 'http://localhost:9000/auth', 
  'request' : {
    'grant_type': null,
    'scope': null,
    'client_id': null,
    'client_secret': null, 
    'username' : $scope.credentials.username,
    'password' : $scope.credentials.password
  };
  // use $scope.authServer here
};

解决方案2 使用

$scope.watch（'credentials'，function（）{$scope.authServer=/*…*/}，true）在控制器内

解决方案3
（参见杨莉的回答），引用对象
$scope.credentials
而不是单个属性
您需要分配credentials对象，这是一种引用类型。用户名和密码是原语，是值类型


您需要将其重新分配到update.thx，但这对我不起作用，因为我必须保持两个模式都是thx，我认为会有一种更优雅的方法来实现这一点，但我会在发送它之前设置这两个变量。。。
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
 $scope.credentials = {
      'username': null,
      'password' : null
    };

    $scope.authServer = {
      'url' : 'http://localhost:9000/auth', 
      'request' : {
        'grant_type': null,
        'scope': null,
        'client_id': null,
        'client_secret': null, 
        'credentials': $scope.credentials
      }
    };
});