javascript - Angular View {{ var }} 更新，但 $scope.var 没有改变？

Question

我正在使用 ui-bootstrap rating directive ，并且遇到了一些奇怪的事情。

下面是该指令使用的标记。两个变量被传递到指令中，rateValue和rateMax

<div class="ratingContainer textCentered">
    <rating value="rateValue" max="rateMax"></rating>
</div>
<h4>
    {{rateValue}} / {{rateMax}}
</h4>

奇怪的是，当我选择不同数量的星星时，我可以看到 View 中正在更新的rateValue 变量。但变量的值不会在 $scope View 模型中更新。

app.controller( 'addModalCtrl', function($scope, $modalInstance, selectedMovie, myMovieService ) {

  $scope.rateValue = 0;
  $scope.rateMax = 10;
  $scope.selectedMovie = selectedMovie;

  $scope.addToLib = function( item ) {

    var jsonData = {
        tmdb_id: $scope.selectedMovie.id,
        my_rating: $scope.rateValue //this always remains 0
    };

Answer 1

不确定这里到底出了什么问题，但我猜这是由于作用域变量是基元而不是对象引起的；其中technical reasons行为出乎意料。

一般来说，最好使用对象来存储范围值，而不是直接使用变量。因此，您应该将作用域变量放入像这样的对象中:

 $scope.vals = {};
 $scope.vals.rateValue = 0;
 $scope.vals.rateMax = 10;
 //etc.
 // Functions doesn't need to be in an object:
 $scope.addToLib = function( item ) { //...

和

 <h4>
     {{vals.rateValue}} / {{vals.rateMax}}
 </h4>