Question

我想知道包含代码的最佳位置是什么，如下所示。

if (gameInfo.products[0].product_image_height / gameInfo.products[0].product_image_width > imageRatio) {
        $scope.largeImageCss = "large-image";   
        $scope.sectionType = "vertical_section";
    } else {            
        $scope.largeImageCss = "";
        $scope.sectionType = "horizontal_section";
    }

问题在于，您可以看到它在视图中修改了{{largeImageCss}}。

现在我需要在控制不同视图的不同控制器中使用相同的逻辑（完全相同的代码）。

是否有类似帮助者/混合物的东西，我们可以以有角度的方式用于此目的。

我不认为服务，工厂，提供商是正确的地方，因为它包含当前控制器的$ scope操作。

Answer 1

我相信你所寻找的是AngularJS中提到的service。虽然AngularJS具有内置服务，例如$http，$compile和$templateCache，但AngularJS允许您创建自己的自定义服务。

虽然您在问题中提到您并不认为服务是控制器的逻辑操作应该发生的地方，但如果您计划在多个控制器上使用相同的逻辑操作，我认为这不是问题。也许更有知识的人可以评论我的方法是否是“角度方式”。请参阅以下示例：

<强> app.js：

var app = angular.module('app', []);
app.service('sharedProperties', function() {

    return {
        getLargeImageCss: function(info, ratio) {
            if(info.products[0].product_image_height / info.products[0].product_image_width > ratio) {
                return 'large-image';
            }
            else {
                return '';
            }
        },
        getSectionType: function(info, ratio) {
            if(info.products[0].product_image_height / info.products[0].product_image_width > ratio) {
                return 'vertical_section';
            }
            else {
                return 'horizontal_section';
            }
        }
    };
});

<强> controllers.js：

app.controller('controller1', ['$scope', 'sharedProperties', function($scope, sharedProperties) {

    $scope.largeImageCss = sharedProperties.getLargeImageCss(gameInfo, imageRatio);
    $scope.sectionType = sharedProperties.getSectionType(gameInfo, imageRatio);
}]);

app.controller('controller2', ['$scope', 'sharedProperties', function($scope, sharedProperties) {

    $scope.largeImageCss = sharedProperties.getLargeImageCss(gameInfo, imageRatio);
    $scope.sectionType = sharedProperties.getSectionType(gameInfo, imageRatio);
}]);

为了使上述代码更简洁，因为在两个服务的函数中使用了相同的条件，所以将getLargeImageCss和getSectionType函数分组到一个getImageInfo函数中，该函数返回同一个对象中的largeImageCss和sectionType。

Angular JS包含多个控制器共享的视图逻辑的通用位置

1 个答案: