Question

学习如何使用服务，但真的很难。试图制作一个简单的计算器来提供2个范围值（2个输入）的总和。我的功能似乎是取值并发送它们没问题。但是当我解雇我的功能时，我的结果范围似乎正在改变或更新。

这是我到目前为止所得到的：

的jsfiddle： https://jsfiddle.net/9bz4Lwxa/528/

HTML：

<body ng-app="myApp" ng-controller="myController">
   Val1: <input ng-model="val1"> {{val1}} <br> 
   Val2: <input ng-model="val2"> {{val2}} <br><br>
   Total result: <input ng-model="result"> {{result}} <br>
   <input type="button" ng-click="calculate_controller()" value="Calculate"><br>
</body>

SCRIPT：

angular.module('myApp', [])
  .controller('myController', function($scope, businessRepository) {
       $scope.result = businessRepository.result_service();
       $scope.val1 = "";
       $scope.val2 = "";
       $scope.calculate_controller = function() { 
        console.log("Hello");
        businessRepository.calculate_service($scope.val1, $scope.val2) 
       };
})
  .factory('businessRepository', function($http) {
    return {
        result_service: function(data){
         console.log("test function launched", data)
         return data;
        },
        calculate_service: function(val1, val2){
          var result = val1 + val2;
          this.result_service(result); 
        }
    };
});

Answer 1

您需要从服务data返回businessRepository，并且需要在控制器myController中使用它。您还需要将val1和val2转换为Number。我在片段中使用了+来实现它。

angular.module('myApp', [])
.controller('myController', function ($scope, businessRepository) {
    $scope.calculate_controller = function () {
        $scope.result = businessRepository.calculate_service(+$scope.val1, +$scope.val2)
    };
})
.factory('businessRepository', function ($http) {
    return {
        result_service: function (data) {
            return data || 0;
        },
        calculate_service: function (val1, val2) {
            var result = val1 + val2;
            //Return the data from
            return this.result_service(result);
        }
    };
});

＆＃13;

angular.module('myApp', [])
  .controller('myController', function($scope, businessRepository) {
    $scope.calculate_controller = function() {
      $scope.result = businessRepository.calculate_service(+$scope.val1, +$scope.val2)
    };
  })
  .factory('businessRepository', function($http) {
    return {
      result_service: function(data) {
        return data;
      },
      calculate_service: function(val1, val2) {
        var result = val1 + val2;
        return this.result_service(result);
      }
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  Val1:
  <input ng-model="val1">
  <br>Val2:
  <input ng-model="val2">
  <br>
  <br>Total result:
  <input ng-model="result">{{result}}
  <br>
  <input type="button" ng-click="calculate_controller()" value="Calculate">
  <br>
</div>

＆＃13;

Answer 2

您需要通过以下方式更改calculate_service：

calculate_service: function (val1, val2) {
    var result = parseInt(val1) + parseInt(val2);
    return this.result_service(result);
}

并且计算_控制器由：

$scope.calculate_controller = function () {
    $scope.result = businessRepository.calculate_service($scope.val1, $scope.val2)
};

Angular - 用于计算2个范围之和的服务

2 个答案: