优化 angular 重复代码

Question

如何优化这里的重复代码

angular.module('myApp')
    .controller('LogsController', function ($scope, LogsService) {
        $scope.updatingLogs = true;
        $scope.loggers = {};

        LogsService.findAll().$promise.then(function(data) {
            $scope.loggers = data;
            $scope.updatingLogs = false;
        });

        $scope.changeLevel = function (name, level) {
            LogsService.changeLevel({name: name, level: level}, function () {
                $scope.updatingLogs = true;
                LogsService.findAll().$promise.then(function(data) {
                    $scope.loggers = data;
                    $scope.updatingLogs = false;
                });
            });
        };
    });

Answer 1

您可以创建 $scope.findAll 方法，该方法将创建 LogsService.findAll() 的 ajax，这样您就可以在 elsewhere.Optimize 版本中多次使用此功能会是。

代码

angular.module('myApp')
    .controller('LogsController', function($scope, LogsService) {
        $scope.updatingLogs = true;
        $scope.loggers = {};

        $scope.findAll = function() {
            LogsService.findAll().$promise.then(function(data) {
                $scope.loggers = data;
                $scope.updatingLogs = false;
            });
        }

        $scope.changeLevel = function(name, level) {
            LogsService.changeLevel({
                name: name,
                level: level
            }, function() {
                $scope.updatingLogs = true;
                $scope.findAll();
            });
        };

        $scope.findAll(); //init
    });

Answer 2

这里有一个建议：

angular.module('myApp')
    .controller('LogsController', function ($scope, LogsService) {
        $scope.updatingLogs;
        $scope.loggers = LogsService.findAll();

        $scope.changeLevel = function (name, level) {
            $scope.updatingLogs = LogsService.changeLevel({name: name, level: level}, function () {
                LogsService.findAll().$promise.then(function(data) {
                    $scope.loggers = data;
                    $scope.updatingLogs = null;
                });
            });
        };
    });

Answer 3

取决于您的目标。如果您正在寻找代码清晰度，潜在的重构可能看起来像这样。

angular.module('myApp')
  .controller('LogsController', function ($scope, LogsService) {

    activate();

    $scope.changeLevel = function (name, level) {
        LogsService.changeLevel({name: name, level: level}, changelevelHandler);
    }; 

    function changeLevelHandler() {
        $scope.updatingLogs = true;
        getLogs();
    }

    function getLogs() {
      LogsService.findAll().$promise.then(function(data) {updateLoggers(data);});
    }

    function updateLoggers(data) {
        $scope.loggers = data;
        $scope.updatingLogs = false;
    }

    function activate() {
       $scope.updatingLogs = true;
       $scope.loggers = {};
       getLogs();

    }
});

优化 angular 重复代码

optimise angular duplicate code

javascript

angularjs

angularjs-controller