Question

我对Angular很新。我创建了一个工厂，以便在多个控制器之间重用一些功能。这个FIDDLE是我的代码的一个更简单的版本，它不起作用。

JS：

var AppModule = angular.module('myApp', []);

AppModule.factory('AppService', function(){
    return{
        convert: function convert(unit, value){
            if (unit === '/day') {
                cost = value*12/365;
            }
            else if (unit === '/month') {
                cost = value;
            }
            else if (unit === '/year') {
                cost = value*365;
            }
            return cost;
        },
        convert_all: function convert_all(selected_unit, costs){
            converted_costs = angular.copy(costs);
            angular.forEach(costs,function(cost, key){
                converted_costs[key].value = convert(selected_unit, cost.value);
            });
            return converted_costs;
        }
    }    
});

AppModule.controller('AppCtrl', function($scope, AppService){
    $scope.units = ['/day', '/month', '/year'];
    $scope.selected_unit = $scope.units[1];
    $scope.costs = [{title:'Rent', value:800},{title:'Food', value:400}];
    $scope.converted_costs = AppService.convert_all($scope.selected_unit, $scope.costs);     
});

HTML：

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <select ng-model="selected_unit" ng-options="selected_unit for selected_unit in units"></select>
        <div ng-repeat="cost in converted_costs">
            <p>{{cost.title}}: {{cost.value | currency}}</p>
        </div>
    </div>
</div>

目的是能够选择一个单位并自动转换成本。

我认为我有第一个问题（可能是错误的语法）我调用convert_all转换，无法找出原因。

如果我只使用转换功能测试一次，我就可以将转换工作，但仅限于第一个实例。即，当选择另一个单位时，它不会更新。我知道这是因为工厂是单身人士，并没有注意所选单位的变化。我读到我可以将工厂结果发送到rootScope或广播控制器范围，或者可能使用promises但我无法获得任何这些解决方案来处理我的代码并且无法找到明确的答案。处理这个问题的最佳方法。

非常感谢任何想法或建议。

THX

Answer 1

或者你可以用更简单的方式：jsfillde

查看：

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <select ng-model="selected_unit" ng-options="selected_unit for selected_unit in units" ng-change=update()></select>
        <div ng-repeat="cost in converted_costs">
            <p>{{cost.title}}: {{cost.value | currency}}</p>
        </div>
    </div>
</div>

JS：

var AppModule = angular.module('myApp', []);

AppModule.factory('AppService', function(){



    function convert(unit, value){
            if (unit === '/day') {
                cost = value*12/365;
            }
            else if (unit === '/month') {
                cost = value;
            }
            else if (unit === '/year') {
                cost = value*365;
            }
            return cost;
        }
    function convert_all(selected_unit, costs){
            converted_costs = angular.copy(costs);
            angular.forEach(costs,function(cost, key){
                converted_costs[key].value = convert(selected_unit, cost.value);
            });
            return converted_costs;
        }


   var service =
    {
        convert: convert,
        convert_all: convert_all
    }

   return service;
});

AppModule.controller('AppCtrl', function($scope, AppService){
    $scope.units = ['/day', '/month', '/year'];
    $scope.selected_unit = $scope.units[1];
    $scope.costs = [{title:'Rent', value:800},{title:'Food', value:400}];
    $scope.converted_costs = AppService.convert_all($scope.selected_unit, $scope.costs); 
    $scope.update = function(){

    $scope.converted_costs = AppService.convert_all($scope.selected_unit, $scope.costs); 

    }    
});

Answer 2

与其他答案类似，但让服务返回所有方法（也许您想在控制器中使用convert。还为控制器添加了一个监视器：

var AppModule = angular.module('myApp', []);

AppModule.factory('AppService', function () {
    var self = this;
    self.srv = {
        convert: function convert(unit, value) {
            if (unit === '/day') {
                cost = value * 12 / 365;
            } else if (unit === '/month') {
                cost = value;
            } else if (unit === '/year') {
                cost = value * 365;
            }
            return cost;
        },
        convert_all: function convert_all(selected_unit, costs) {
            var converted_costs = angular.copy(costs);
            angular.forEach(costs, function (cost, key) {
                converted_costs[key].value = self.srv.convert(selected_unit, cost.value);
            });
            return converted_costs;
        }

    }
    return self.srv;
});

AppModule.controller('AppCtrl', function ($scope, AppService) {
    $scope.units = ['/day', '/month', '/year'];

    $scope.$watch('selected_unit', function (val) {
        $scope.selected_unit = val;
        $scope.converted_costs = AppService.convert_all($scope.selected_unit, $scope.costs);
    });

    $scope.costs = [{
        title: 'Rent',
        value: 800
    }, {
        title: 'Food',
        value: 400
    }];

});

工厂和控制器之间的角度通信

2 个答案: