鍵入數字輸入後不會更新角度ng-model

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 

這些將被控制在加載時只調用一次。把它們放在函數裏面蘇馬爾

使用vm.total和vm.totalB代替vm.total.value和vm.totalB.value在HTML

Answer 3

你可以嘗試在HTML實施required ng-change="controller.functionThatIncrementsValues"。

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

除非你有兩個控制器和服務的特定需要，我只想把這一切都在一個控制器。目前你所擁有的是巨大的矯枉過正。