数字入力に入力した後に角形モデルが更新されない

Question

したがって、基本的に2つのコントローラを持つシンプルなアプリケーションを作成しています。 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 

コントローラがロードされると、これらは一度だけ呼び出されます。 HTML

Answer 3

にあなたのHTML内required ng-change="controller.functionThatIncrementsValues"を実装しようとすることができ、機能sumar

使用vm.totalとvm.totalB代わりvm.total.valueのとvm.totalB.valueの内側に配置します。

Answer 4

このヘルプたい何か：

HTML

​​

JS

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

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

次の2つのコントローラの特定のニーズと私はすべて1でこれを置くサービスを持っていない限り、コントローラ。現時点であなたが持っているものは大規模な過剰なものです。ここで