javascript - 输入数字输入后 Angular ng-model 不更新

Question

基本上我是在创建一个带有两个 Controller 的简单应用程序。 ControllerA 按钮递增 ControllerB 数字输入，反之亦然。

问题是 $scope.total 在手动输入数字后没有更新，我不知道实现这个的最佳方法是什么。

HTML

<div ng-app="tabsApp">

    <div id="tabOne" class="tabcontent">
          <div ng-controller="tabOneController as vm">
          <input type="button" value="increment value in tab 2" ng-click="vm.sumar()"/>
          <input type="number" ng-model="vm.totalB.value">
          </div>
    </div>


    <div id="tabTwo" class="tabcontent">
        <div ng-controller="tabTwoController as vm">
        <input type="button" value="increment value in tab 1" ng-click="vm.sumar()"/>
        <input type="number" ng-model="vm.total.value">
        </div>
    </div>

</div>

JS

  var app = angular.module('tabsApp', []);
  app.controller("tabOneController", controllerA);
  app.controller("tabTwoController", controllerB);
  app.service('myData', function() {

      var data = {
        value: 0
      }, dataB = {
        value: 0
      }; 

      this.addItem = function (value) {
        data.value = value;
      }

      this.getItem = function() {
        return data;
      }

      this.addItemB = function (value) {
        dataB.value = value;
      }

      this.getItemB = function() {
        return dataB;
      }

    });



    function controllerA(myData){

      var scope = this;
      scope.total = 0;

      scope.sumar = function(){
        scope.total++;
        myData.addItem(scope.total);
      }

      scope.totalB = myData.getItemB();
    }

    function controllerB(myData){

      var scope = this;
      scope.totalB = 0;

      scope.sumar = function(){
        scope.totalB = myData
        scope.totalB++;
        myData.addItemB(scope.totalB);
      }

      scope.total = myData.getItem();

    }

Answer 1

这是一个基于您的代码的工作示例:Plunker

function controllerA(myData){

  var scope = this;
  scope.total = 0;

  scope.sumar = function(){
    scope.total = myData.getItem().value;  // added this line
    scope.total++;
    myData.addItem(scope.total);
  }

  scope.totalB = myData.getItemB();
}

function controllerB(myData){

  var scope = this;
  scope.totalB = 0;

  scope.sumar = function(){
    scope.totalB = myData.getItemB().value;  // modified this line
    scope.totalB++;
    myData.addItemB(scope.totalB);
  }

  scope.total = myData.getItem();

}