Angularjsのデータバインディングがコントローラで更新されない

私は理解できない問題があります。下に自分のコードをコピーしました。問題は、数値をクリックして$ scope.screen.operationを更新する必要がありますが、更新していないことです。私は間違った方法でデータのバインディングを知っていますか？Angularjsのデータバインディングがコントローラで更新されない

(function() { 
 
    var app = angular.module('electronApp', []); 
 

 
    app.controller('MainCtrl', function ($scope) { 
 

 
     $scope.numbers = { 
 
      one: '', 
 
      two: '' 
 
     }; 
 

 
     $scope.operation = ''; 
 

 
     $scope.screen = { 
 
      operation: $scope.numbers.one +' '+ $scope.operation +' '+ $scope.numbers.two, 
 
      result: '' 
 
     }; 
 

 
     $scope.number = function (number) { 
 

 
      if($scope.operation == '') { 
 
       $scope.numbers.one = '' + $scope.numbers.one + number; 
 
      } 
 

 
      console.log($scope.screen.operation); 
 

 
     } 
 

 
    }); 
 
})();

.screen{ 
 
    border: 1px solid #bbb; 
 
    background-color: #fafafa; 
 
    border-radius: 2px; 
 
    height: 200px; 
 
    margin-top: 15px; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 
.screen .operation-list{ 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
} 
 
.screen .result{ 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    right: 15px; 
 
    bottom: 15px; 
 
    left: 15px; 
 
    text-align: right; 
 
} 
 

 
.button-box{ 
 
    margin-top: 5px; 
 
} 
 
.button-box .row div{ 
 
    padding: 5px 5px; 
 
} 
 
.button-box .row div:first-child{ 
 
    padding-left: 0; 
 
} 
 
.button-box .row div:last-child{ 
 
    padding-right: 0; 
 
} 
 
.button-box .row div button{ 
 
    width: 100%; 
 
    height: 40px; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    padding: 0; 
 
}

<!DOCTYPE html> 
 
<html ng-app="electronApp"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Hello World!</title> 
 
\t 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 

 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    </head> 
 
    <body> 
 
    
 
\t <div class="container-fluid" ng-controller="MainCtrl"> 
 
     <div class="screen col-xs-12"> 
 
      <div class="operation-list" ng-bind="screen.operation"></div> 
 
      <div class="result"> 
 
       <span>{{screen.result}}</span> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12 button-box"> 
 
      <div class="row"> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(1)">1</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(2)">2</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(3)">3</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="operation">+</button></div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(4)">4</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(5)">5</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(6)">6</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="operation">-</button></div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(7)">7</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(8)">8</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(9)">9</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="operation">*</button></div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="number" ng-click="number(0)">0</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="clear">Tmzl</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="backspace">Sil</button></div> 
 
       <div class="col-xs-3"><button class="btn btn-default" button-type="operation">/</button></div> 
 
      </div> 
 
     </div> 
 
\t </div> 
 
\t 
 
    </body> 
 

 
</html>

出典

2016-08-09 Aydın Bulut

$ scope.screen.operationバインドされたデータではない文字列になります。

完全に我々が達成しようとしているのかわからなく、可能な解決策はありませんあなたが望む操作文字列を返す関数をinvole、そしてそれを呼び出すことができます：

$scope.makeOperation = function() { 
    return $scope.numbers.one + ' ' + $scope.operation + ' ' + $scope.numbers.two; 
}

...

$scope.number = function (number) { 
    if ($scope.operation == '') { 
    $scope.numbers.one = '' + $scope.numbers.one + number; 
    } 
    $scope.screen.operation = $scope.makeOperation(); 
    console.log($scope.screen.operation); 
}

出典

2016-08-09 19:18:13 Peheje

あなたは正しいですが、単にエラーを指摘する代わりに、提案された解決策を提示することができますか？ – Lex

可能な解決策を追加しました。テストされていませんが、そのようなものです。 – Peheje

答えがありがとう、あなたは良い解決策を書いて、私は@ Quiriacusの答えから私の問題のポイントを得ました。 –

それはあなたが$scope.screen.operation

$scope.screen = { 
    operation: $scope.numbers.one +' '+ $scope.operation +' '+ $scope.numbers.two, 
    result: '' 
};

ではauのことを期待するようになります。割り当ての右側にある用語が更新されるため、自動的に再評価されます。

AngularJSのデータバインディングは、そのようには機能しません。 $scope.screen.operationは、その時点の右側の値に基づいて、（コントローラが初期化されたとき）と評価されます。

次に、$scope.screen.operationをUI（双方向データバインディング）またはコントローラのロジックなどで明示的に更新する必要があります。

あなたが明示的$scope.numbers.one上の変化を検出するために、あなたの$scope.number機能

または

使用$watchで$scope.screen.operationを更新することができます（その変更は、現時点ではあなたの$scope.number機能で行われます。）

$scope.$watch('numbers.one', function(newVal, oldVal) { 
    $scope.screen.operation = newVal + ' ' + $scope.operation + ' ' + $scope.numbers.two; 
}

$scope.numbers.twoでも同じことをしたいと思うでしょう。

出典

2016-08-09 20:02:11 Kyriakos

awnserをありがとう、私はあなたにおかげで角度コード側で論理データバインディングを得ました。 –

Angularjsのデータバインディングがコントローラで更新されない

答えて

関連する問題