Question

我们最终决定在工作中使用Angular，并且我被要求开发一个小原型来查看AngularJS的功能。

我们有一个gradeController.js文件，其中包含以下代码：

var gradeControllers = angular.module('gradeControllers', []);

gradeControllers.controller('GradeListController', ['$scope', '$http',
    function ($scope, $http) {
        $http({
            method: 'GET',
            url: '/api/grades',
            params: {
                skip: 0,
                take: 1000
            }
        }).success(function (data) {
            $scope.grades = data.splice(0, 150);
            $(".loader").hide();
        });

        $scope.saveChanges = function (grade) {
            alert("SAVING CHANGES...");
            $scope.gradeValue = grade.gradeValue;
            $scope.comment = grade.comment;
            $http({
                method: 'PUT',
                url: '/api/grades',
                params: {
                    id: grade.gradeId,
                    gradeValue: grade.gradeValue
                }
            }).success(function () {
                window.location.href = "#/grades";
            }).fail(function () {
                alert('FAIL');
            });
        };

    $scope.orderProp = 'dateModified';
}]);

gradeControllers.controller('GradeDetailController', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http) {
        $http({
            method: 'GET',
            url: '/api/grades/' + $routeParams.gradeId,
        }).success(function (data) {
            $scope.grade = data;
            $("form").show();
            $(".loader").hide();
        });

        $scope.saveChanges = function (grade) {
            $scope.gradeValue = grade.gradeValue;
            $scope.comment = grade.comment;
            $http({
                method: 'PUT',
                url: '/api/grades',
                params: {
                    id: grade.gradeId,
                    gradeValue: grade.gradeValue
                }
            }).success(function () {
                window.location.href = "#/grades";
            }).fail(function() {
                alert('FAIL');
            });
        };
    }
]);

现在，您可以看到我们在两个控制器中都有重复的saveChanges()功能，这就是困扰我们的事情。

在定义模块时是否可以几乎注入$scope和$http并将saveChanges()函数放在控制器之外？如下所示：

var gradeControllers = angular.module('gradeControllers', ['$scope', '$http']);

$scope.saveChanges = function (grade) {
    $scope.gradeValue = grade.gradeValue;
    $scope.comment = grade.comment;
    $http({
        method: 'PUT',
        url: '/api/grades',
        params: {
            id: grade.gradeId,
            gradeValue: grade.gradeValue
        }
    }).success(function () {
        window.location.href = "#/grades";
    }).fail(function () {
        alert('FAIL');
    });
};

gradeControllers.controller('GradeListController', [,
    function ($scope, $http) {
        $http({
            method: 'GET',
            url: '/api/grades',
            params: {
                skip: 0,
                take: 1000
            }
        }).success(function (data) {
            $scope.grades = data.splice(0, 150);
            $(".loader").hide();
        });

        $scope.saveChanges();

    $scope.orderProp = 'dateModified';
}]);

gradeControllers.controller('GradeDetailController', ['$routeParams',
    function($scope, $routeParams, $http) {
        $http({
            method: 'GET',
            url: '/api/grades/' + $routeParams.gradeId,
        }).success(function (data) {
            $scope.grade = data;
            $("form").show();
            $(".loader").hide();
        });

        $scope.saveChanges();

    }
]);

我们通常使用

致电saveChanges()

<input id="saveChanges" type="submit" class="btn btn-primary" ng-click="saveChanges(grade)" text="Save changes" />

所以我相信（我希望）如果我们把saveChanges()置于控制器之外，它仍然会知道范围是什么。

如果您需要任何澄清，请告诉我，我希望比我更有经验的人可以帮助我们解决这个问题

Answer 1

看看services - 我会说这就是你要找的东西。（http://docs.angularjs.org/guide/dev_guide.services.understanding_services）

Answer 2

一种选择是创建自己的服务

app.service('util', ['$http', [function () {
 this.util = {
    _saveChanges = function (scope, grade) {
            scope.gradeValue = grade.gradeValue;
            scope.comment = grade.comment;
            $http({
                method: 'PUT',
                url: '/api/grades',
                params: {
                    id: grade.gradeId,
                    gradeValue: grade.gradeValue
                }
            }).success(function () {
                window.location.href = "#/grades";
            }).fail(function() {
                alert('FAIL');
            });
        }
    }

    var self = this.util;
    return {
        saveChanges: this.util._saveChanges
    }
}]);

您可以将此服务包含在您的控制器中

var gradeControllers = angular.module('gradeControllers', ['$scope', '$http', 'util']);
gradeControllers.controller('GradeListController', [,
    function ($scope, $http, util) {
        $scope.saveChanges = util.saveChanges;
        ...
    }]);

并致电

$scope.saveChanges($scope, grade)

您传递当前$ scope和grade

AngularJS中是否存在全局函数？ [见代码]

2 个答案: