AngularJS：将变量引用分配给对象属性

Question

AngularJS：将变量引用分配给对象属性

4

如下所示的代码片段中，$scope.foo 赋值为 $scope.bar 对象的 foo 属性。它们只在初始化时同步。我希望在我的 $scope.bar 对象中有一个对 $scope.foo 的引用来保持它们的同步。

注意：
此问题处于 AngularJS 上下文中。
这是一个微不足道的问题，应该在 JS 框架中解决。

在 Plunker 中的工作解决方案：这里存在问题的代码片段：

angular.module('app', [])

.controller('Ctrl', ['$scope', function($scope) {
 
    $scope.foo = "eeee";
    $scope.bar = {
        foo : $scope.foo
    };
    
    $scope.do = function() {
        alert($scope.foo);
    };
    
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="Ctrl">
    
    foo : 
    <input type="text" ng-model="foo"> {{foo}} <br />
    
    bar : 
    <input type="text" ng-model="bar.foo"> {{bar}} <br />
    
    
    <button type="button" ng-click="do()"> DO </button>
    
    
  </div>
</body>

- gr3g

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- paolobueno · Answer 1

在JavaScript中，字符串是不可变的。因此，当你执行foo: $scope.foo时，你将字符串的值分配给对象的属性，而不是引用$scope.foo。

保持它们同步的最佳方法是将字符串值包装在对象中，并使用这些对象来保持相互引用。

angular.module('app', [])

.controller('Ctrl', ['$scope', function($scope) {
 
    $scope.bar = {
        foo : {value: "eeee"}
    };
    $scope.foo = $scope.bar.foo;
    
    $scope.do = function() {
        alert($scope.foo.value);
    };
    
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="Ctrl">
    
    foo : 
    <input type="text" ng-model="foo.value"> {{foo.value}}<br />
    
    bar : 
    <input type="text" ng-model="bar.foo.value"> {{bar}} <br />
    
    
    <button type="button" ng-click="do()"> DO </button>
    
    
  </div>
</body>

- jjmontes · Answer 2

在JavaScript中，在执行期间定义数组时，变量会在执行时解析：

$scope.foo = 5;
$scope.bar = {
    foo : $scope.foo
};

如果现在执行 $scope.foo = 7;，$scope.bar.foo 仍然是 5。

要访问新值，可以直接访问 $scope.foo。如果出于某些原因必须将它们保持同步，可以使用 Angular watch：

$scope.$watch('foo', function(newVal) { $scope.bar.foo = newVal; });

请注意，此类监视仅在下一个摘要周期中应用（而不是在更新$scope.foo时立即应用）。此外，绑定只能单向进行。