Question

我有一些角度应用程序，这很容易。我已将所有内容放入一个控制器中，但我想将其拆分为多个控制器，因此每个控制器都应该执行属于它的操作，而不是在一个控制器中有很多不同含义的不同功能。

这是一段代码：

    var videoApp = angular.module('videoApp', ['videoAppFilters', 'ui.unique', 'angularUtils.directives.dirPagination']);

videoApp.controller('VideoListCtrl', function ($scope, $http, $filter) {

    $scope.getFilteredResults = function (category, data, callback) {
        callback = callback ||$filter('articleFilter');
        $scope.videos = callback(category, data);
        return $scope.videos;
    };

    $scope.setPageSize = function (pageSize) {
        $scope.pageSize = pageSize;
        return $scope.pageSize;
    };

    $scope.addFavorite = function (data, key) {
        localStorage.setItem(key, data);
        $scope.getFilteredResults(data, $scope.allData);
        return alert(key + " "+ data + " was added to your favorite list.");
    };

    $scope.addSelectedClass = function (event) {
        if($(event.target).hasClass("selected") == true)
        {
            $(event.target).removeClass("selected");
        } else {
            $(".selected").removeClass("selected");
            $(event.target).addClass("selected");
        }
    };

    $scope.formatDate = function (dateString) {
        var date = new Date(parseInt(dateString));
        return date.toDateString();
    };

    $scope.cacheLoad = function (url, allowCache) {
        if(allowCache == false || localStorage.getItem(url) && (parseInt(localStorage.getItem(url + 'time')) + 20000) < (new Date().getTime()) || (!localStorage.getItem(url) )) {
            $http.get(url).success(function (data) {

                $scope.allData = data;
                $scope.videos = data;

                if(localStorage.getItem('category')) {
                    $scope.videos = $scope.getFilteredResults(localStorage.getItem('category'), $scope.allData);
                } else {
                    $scope.videos = data;
                }

                $scope.categories = $filter('categoryFilter')(data);

                if(allowCache == true && parseInt(localStorage.getItem(url + 'time')) + 20000 < (new Date().getTime() )) {
                    localStorage.setItem(url, JSON.stringify(data));
                    localStorage.setItem(url + 'time', new Date().getTime());
                }

            });
        } else {
            $scope.allData = JSON.parse(localStorage.getItem(url));
            $scope.videos = JSON.parse(localStorage.getItem(url));
            $scope.categories = $filter('categoryFilter')(JSON.parse(localStorage.getItem(url)));
        }
    };

    $scope.pageSize = 12;
    $scope.cacheLoad('http://academy.tutoky.com/api/json.php', true);
});

那么，如何将其拆分为多个控制器以及如何在它们之间传递数据？

Answer 1

您可以将内容拆分为服务，例如，以下项目可能是您的代码中的服务，然后依赖注入您的控制器：

您的缓存逻辑，这通常是您想要重用的东西，因此成为一项服务是有意义的。

您可能还希望将以下项目设为过滤器或指令：

$ scope.formatDate - 您可以在每次要格式化日期时调用此函数，而在html中调用{{ date | formatDate }}或<div formatDate>{{ date }}</div>

你也可以去掉pageSize，但这取决于你想要的粒度。

如何使用角度缩放控制器

1 个答案: