Question

我正在一个网站上工作，其中一部分是页面生成器，是由另一个人编写的。这部分代码在模板缓存中准备其HTML，并具有几个访问此HTML页面中复杂小部件的功能。每个复杂的小部件都有自己的控制器作为独立的功代码的格式为：

(function (app) {
    try {
        app = angular.module(SGGenerator + '.templates');
    } catch (error) {
        app = angular.module(SGGenerator + '.templates', []);
    }

    app.run(["$templateCache", function ($templateCache) {
        $templateCache.put("ivm-color-picker/templates/color-picker-field.html",
            "<label class=\"item item-input item-has-button-right\">\n" +
            […]
            "</a>");
    }]);
})();
(function () {
    var controllerName = 'ServerController', moduleName = 'ivmServer';

    angular.module(moduleName, ['ionic'])
        .controller(controllerName, function ($scope) {
            […]
            $scope.startPage2Server = function ($scope) {
            […]
            };
        }).directive(moduleName, function () {
            […]
        }
    })
}());   // ServerController
(function () {
    var controllerName = 'IconPickerController', moduleName = 'ivmIconpicker';

    angular.module(moduleName, ['ionic'])
        .controller(controllerName, function ($scope, $ionicPopover, $http) {
            […]
    })
    .directive(moduleName, function () {
        return {
            controller: controllerName,
            restrict: 'E',
            scope: {
                ngModel: '=',
                label: '@'
            },
            templateUrl: 'ivm-icon-picker/templates/icon-picker-field.html'
        }
    })
}());   // IconPickerController

等。我需要的是它们的“共同范围”，以便轻松实现数据交换。你对这个问题有什么解决方案？我不想与服务器通信一些“全局”变量内容。

Answer 1

AngularJS框架内部的通信使用服务的概念，它们代表控制器之间的共享资源，以执行数据交换和业务逻辑。

您可以按以下方式添加服务：

angular.module(moduleName, ['ionic'])
    .factory('MyService', function() {
        let myVar = 1;
        return {
            setMyVar: function(value) {
                myVar = value;
            },
            getMyVar: function() {
                return myVar;
            }
        };
    });

您现在可以在控制器中使用此注册服务：

angular.module(moduleName, ['ionic'])
    .controller(controllerName, function ($scope, MyService) {
        MyService.setMyVar(2);
    })

// ...

angular.module(moduleName, ['ionic'])
    .controller(otherControllerName, function ($scope, MyService) {
        MyService.getMyVar();
    })

具有各自范围的功能之间的通信

1 个答案: