Angularjs數據綁定未在控制器中更新

Question

有一個我無法理解的問題。 我在下面復制了我的代碼。 問題是，當我單擊一個數字時，它必須更新$ scope.screen.operation，但不會更新它。 我知道錯誤的數據綁定方式嗎？

 (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> <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> <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> </div> </body> </html>

Answer 1

$ scope.screen.operation變為未綁定數據的字符串。

不能完全確定我們要實現的目標，但是可能的解決方案可以調用返回您想要的操作字符串的函數，並調用該函數：

$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);
}

Answer 2

看起來您期望$scope.screen.operation在

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

將自動重新評估，因為賦值右側的術語已更新。

AngularJS數據綁定不能那樣工作。 $scope.screen.operation將被評估一次（初始化控制器時），該評估基於右側當時的值。

然后由您$scope.screen.operation通過UI（雙向數據綁定）還是通過控制器的邏輯來顯式更新$scope.screen.operation 。

您可以在$scope.number函數中顯式更新$scope.screen.operation 。

要么

使用$watch來檢測$scope.numbers.one上的更改（此更改目前在$scope.number函數中發生。）

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

您可能想要對$scope.numbers.two執行相同的$scope.numbers.two 。

Angularjs數據綁定未在控制器中更新

問題描述

2 個解決方案

解決方案1
2 2016-08-09 19:18:13

解決方案2
1 2016-08-09 20:02:11

Angularjs數據綁定未在控制器中更新

問題描述

2 個解決方案

解決方案1 2 2016-08-09 19:18:13

解決方案2 1 2016-08-09 20:02:11

解決方案1
2 2016-08-09 19:18:13

解決方案2
1 2016-08-09 20:02:11