Question

有一个我无法理解的问题。我复制了下面的代码。问题是，当我点击一个数字时，它必须更新$ scope.screen.operation但它没有更新它。我是否以错误的方式知道数据绑定？

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

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将根据当时右侧条款的值，对一次（初始化控制器时）进行评估。

然后由您自行通过UI（双向数据绑定）或通过控制器的逻辑显式更新$scope.screen.operation。

您可以明确更新$scope.screen.operation功能

中的$scope.number

或

使用$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执行相同操作。

Angularjs数据绑定未在控制器中更新

2 个答案: