AngularJS：爲變量引用賦予對象屬性

正如您在下面的代碼片段中看到的，$scope.foo在$scope.bar對象的foo屬性上分配。這些只在初始化時同步。我想在我的$scope.bar對象中引用$scope.foo以使它們保持同步。AngularJS：爲變量引用賦予對象屬性

注意：
這個問題是在AngularJS上下文中。
這是一個微不足道的問題，應該在JS框架中解決。在Plunker

工作液：here

片段的問題：

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>

來源

2016-10-14 gr3g

字符串是在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>

來源

2016-10-14 14:11:30 paolobueno

我瞭解不可變對象每次他們改變時都會引用它，但我沒有在純JS環境中提出這個問題。 'foo'和'bar'是'$ scope'對象的屬性，由框架處理。這個工程，但我無法想象使用這種模式的生產應用程序...我用解決方案更新了我的問題 – gr3g

在Javascript中，當你在執行過程中定義數組，變量在執行時解析：

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

如果你現在要做$scope.foo = 7;，$scope.bar.foo仍將5。

要訪問新值，可以直接訪問$ scope.foo。如果你必須保持同步出於某種原因，你可以使用一個角度看：

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

注意，這種手錶將在未來消化週期僅適用（不會立即更新$scope.foo）。另外，綁定僅是一個方向。

來源

2016-10-14 14:12:28 jjmontes

我明白不可變對象鬆散有參考每次他們改變，但我沒有問這個問題在純JS環境。 'foo'和'bar'是'$ scope'對象的屬性，由框架處理。這可行，但我無法想象使用這種模式生產應用程序...我用解決方案更新了我的問題 – gr3g

AngularJS：爲變量引用賦予對象屬性

回答

相關問題