Question

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

以下是该指令使用的标记。两个变量传递给指令rateValue和rateMax

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

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

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>

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

1 个答案: