Question

所以基本上我用两个控制器创建一个简单的应用程序。 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();

}

Answer 2

 scope.totalB = myData.getItemB(); // first controller

 scope.total = myData.getItem(); // second controller

加载控制器时，只会调用一次。将它们放在函数sumar中

在html中使用vm.total和vm.totalB而不是vm.total.value和vm.totalB.value

Answer 3

您可以尝试在html中实施required ng-change="controller.functionThatIncrementsValues"。

Answer 4

这样的事情会有所帮助：

HTML

<div ng-app="tabsApp" ng-controller="tabController as vm">

    <div id="tabOne" class="tabcontent">
        <div>
            <input type="button" ng-click="vm.one++" />
            <input type="number" ng-model="vm.two">
        </div>
    </div>


    <div id="tabTwo" class="tabcontent">
        <div>
            <input type="button" ng-click="vm.two++" />
            <input type="number" ng-model="vm.one">
        </div>
    </div>

    <p>Total (method 1): {{vm.one + vm.two}}</p>
    <p>Total (method 2): {{ total(vm.one, vm.two) }}</p>

</div>

JS

 var app = angular.module('tabsApp', []);
 app.controller("tabController", function() {
     this.one = 0;
     this.two = 0;

     this.total = function(one, two) {
         return one + two;
     }
 })

除非您特别需要两个控制器和一个服务，否则我只需将其全部放在一个控制器中。目前，你拥有的是大规模的过度杀伤。

键入数字输入后，角度ng模型不会更新

4 个答案: