AngularJS：Objectプロパティへの変数参照を割り当てます

は、$scope.barオブジェクトのfooプロパティに割り当てられています。以下のコードスニペットで確認できます。これらは初期化時にのみ同期しています。私は$scope.barオブジェクトに$scope.fooへの参照を持ち、それらを同期させておきたいと思います。AngularJS：Objectプロパティへの変数参照を割り当てます

注：
この質問はAngularJSの文脈にあります。
これは小さな問題であり、JSフレームワークで解決する必要があります。問題とhere

スニペット：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>

出典

2016-10-14 gr3g

文字列はJavaScriptで不変であり、あなたがfoo : $scope.fooを行うときに、あなたが代入していますオブジェクトのプロパティに対する文字列の値であり、$scope.fooへの参照ではありません。

これらを同期させておくには、文字列値をオブジェクトにラップし、相互参照を保持するために使用するのが最も良い方法です。 JavaScriptで

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

あなたは、実行時に配列を定義する場合、変数は、実行時に解決され、：

$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：Objectプロパティへの変数参照を割り当てます

答えて

関連する問題