【问题标题】:Using same functions in 2 different controllers AngularJS在 2 个不同的控制器 AngularJS 中使用相同的功能
【发布时间】:2014-02-12 10:10:03
【问题描述】:

我正在尝试在 Angular JS 中通过 3 个控制器重用一些更大的功能。我不想将这些函数固定在我的根范围内,因为我想避免在这 3 个控制器中仅使用 3 次的函数。

    angular.module('adminModule', ['adminDependency'])

        .controller('ctrl1', ['$scope', 'details', function ($scope, details) {
            // use functions
        }])

        .controller('ctrl2', ['$scope', 'details', function ($scope, details) {
            // use functions
        }])

        .controller('ctrl3', ['$scope', 'details', function ($scope, details) {
            // use functions
        }])

你能告诉我如何在不将我的函数写入根范围的情况下实现这一目标吗?

在工厂内尝试过,但调用 AdminModule.toLevelKey() 不起作用...

    .factory('AdminModule',
        [ '$resource', 'serviceURL', function ($resource, serviceURL) {

            return $resource(serviceURL + 'class/:id', {
                    id : '@id'
                }, {
                    getClasses : {
                        method  : 'GET',
                        url     : serviceURL + 'extended/class',
                        isArray : true
                    },

                    toLevelKey : function (value) {
                        var return_key = parseInt(Math.floor(value / 3));
                        var return_level = value % 3;

                        return { level : return_level + 1, levelTranslationKey : return_key + 1 };
                    },

                    fromLevelKey : function (level, key) {
                        if (angular.isDefined(level)) {
                            var value = (key - 1) * 3 + (level - 1);

                            return value;
                        } else {
                            return null;
                        }
                    }
                }
            );
        } ]);

【问题讨论】:

    标签: javascript angularjs controller


    【解决方案1】:

    这可以通过服务来完成:

    .service('myService', function(){
       return {
          fn: function(){
            // do what you want
          }
       }
    });
    

    用法:

    .controller('ctrl2', ['$scope', 'details', 'myService', 
                 function ($scope, details, myService) {
       // use functions
       myService.fn();
    }])
    

    【讨论】:

    • 似乎是一个非常好的解决方案。还有更多选择吗?
    • 你可以使用工厂。但原理是一样的;特别是如果您需要在您的职能部门提供其他服务。在这种情况下,您可以轻松注入它们。
    • 以防万一您需要为详细信息设置一些参数,您应该使用提供程序。
    • 我确实需要传递参数。我试图将服务功能分配给范围,但以某种方式调用 AdminService.func(param1, param2) 不起作用。抛出了一个 infdig 错误。编辑:我在工厂里用过,可以这样吗?
    • 请显示更多详细信息(代码)您正在尝试做什么。
    【解决方案2】:

    根据 David Fariña 的上述评论:“还有更多选择吗?”。

    除了执行之外,您还可以将数据从一个控制器传递到另一个控制器并在事件发生时广播事件。

    共享服务:

        angular.module("yourAppName", []).factory("mySharedService", function($rootScope){
    
            var mySharedService = {};
    
            mySharedService.values = {};
    
            mySharedService.setValues = function(params){
                mySharedService.values = params;
                $rootScope.$broadcast('dataPassed');
            }
    
            return mySharedService; 
       });
    

    第一控制器:

     function FirstCtrl($scope, mySharedService) {
          $scope.passDataInSharedSevice = function(params){
             mySharedService.setValues(params);
          }
     }
    

    第二控制器:

     function SecondController($scope, mySharedService) {
        $scope.$on('dataPassed', function () {
            $scope.newItems = mySharedService.values;
        });
     }
    

    【讨论】:

    • 投反对票的人能告诉我这有什么问题吗?
    • @DavidFariña,我认为,那个反对者的意思是,那个答案与问题不对应。我在您的评论中添加了这个答案:“还有更多选择吗?”答案没有错。
    • 我实际上是这样做的,因为我无法在需要的地方注入服务。谢谢
    猜你喜欢
    • 2017-12-22
    • 1970-01-01
    • 2015-04-13
    • 2012-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-27
    • 1970-01-01
    相关资源
    最近更新 更多