在angularjs中共享控制器中的數據

我想與兩個控制器共享數據，但我的應用程序有一個錯誤。當我第一次點擊x2時，它會返回NAN，但第二次它可以正常工作。我想解決this question。在angularjs中共享控制器中的數據

var mainApp = angular.module("mainApp", []); 
 
mainApp.service('MathService', function() { 
 

 
    this.multiply = function(a, b) { 
 
    return a * b 
 
    } 
 
}); 
 

 
mainApp.service('CalcService', function(MathService) { 
 
    this.square = function(a) { 
 
    return MathService.multiply(a, a); 
 
    } 
 
}); 
 

 
mainApp.service('Data', function() { 
 
    return { 
 
    result: '' 
 
    }; 
 
}); 
 

 
mainApp.controller('CalcController', function($scope, CalcService, Data) { 
 
    $scope.square = function() { 
 
    $scope.Data = Data; 
 
    $scope.result = CalcService.square(Data.number); 
 
    } 
 
}); 
 

 
mainApp.controller('CalcController2', function($scope, MathService, Data) { 
 
    $scope.multiply = function() { 
 
    $scope.Data = Data; 
 
    $scope.result2 = MathService.multiply(Data.number, $scope.number2); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> 
 

 
<body> 
 
    <h2>AngularJS Sample Application</h2> 
 
    <div ng-app="mainApp"> 
 
    <div ng-controller="CalcController2"> 
 
     <p> 
 
     Enter a number: 
 
     <input type="number" ng-model="number2"> 
 
     <button ng-click="multiply()">multiply</button> 
 
     <p>Result x*y: {{result2}}</p> 
 

 
     <div ng-controller="CalcController"> 
 
      <button ng-click="square()">X<sup>2</sup></button> 
 

 
      <p>Result x2:{{result}}</p> 
 
      <br> 
 
      <p> 
 
      Enter a number: 
 
      <input type="number" ng-model="Data.number"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2015-07-04 milad dn

你的代碼似乎工作正常;我看到NaN的唯一時間是當「輸入數字」字段之一爲空時。 – Boris

爲什麼你需要兩個控制器？任何特定的目的？ –

的代碼是工作的罰款。原因是你離開第二個輸入空白，因此整個乘法中斷。請結帳。

var mainApp = angular.module("mainApp", []); 
 
mainApp.service('MathService', function() { 
 

 
    this.multiply = function(a, b) { 
 
    return a * b 
 
    } 
 

 
}); 
 

 
mainApp.service('CalcService', function(MathService) { 
 
    this.square = function(a) { 
 
    return MathService.multiply(a, a); 
 
    } 
 
}); 
 
mainApp.service('Data', function() { 
 
    return { 
 
    result: '' 
 
    }; 
 
}); 
 

 
mainApp.controller('CalcController', function($scope, CalcService, Data) { 
 
    $scope.square = function() { 
 
    debugger; 
 
     Data=$scope.Data; 
 
    $scope.Data = Data; 
 
    $scope.result = CalcService.square(Data.number); 
 

 
    } 
 
}); 
 
mainApp.controller('CalcController2', function($scope, MathService, Data) { 
 

 
$scope.Data = {number:1}; 
 
    $scope.multiply = function() { 
 
     debugger; 
 
    Data=$scope.Data; 
 
    
 
    $scope.Data = Data; 
 
    $scope.result2 = MathService.multiply(Data.number, $scope.number2); 
 

 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> 
 

 
<body> 
 
    <h2>AngularJS Sample Application</h2> 
 
    <div ng-app="mainApp"> 
 

 

 

 
    <div ng-controller="CalcController2"> 
 
     <p>Enter a number: 
 
     <input type="number" ng-model="number2"> 
 
     <button ng-click="multiply()">multiply</button> 
 
     <p>Result x*y: {{result2}}</p> 
 
     <div ng-controller="CalcController"> 
 

 
      <button ng-click="square()">X<sup>2</sup> 
 
      </button> 
 
      <p>Result x2:{{result}}</p> 
 
      <br> 
 
      <p>Enter a number: 
 
      <input type="number" value="0" ng-model="Data.number"> 
 
     </div> 
 

 
    </div> 
 

 

 

 
    </div> 
 

 
</body>

來源

2015-07-04 05:17:51

tanx但它不工作;請在第二次輸入時輸入一個數字並在第一次點擊x2不工作，但在第二次工作 –

請現在檢查 –

不幸的是不工作;我認爲在代碼中的一個地方應該注入數據 –

在angularjs中共享控制器中的數據

回答

相關問題