Question

假设我有以下文件：

JS1档案：

var app = angular.module('myApp', []);
app.controller('myCtrlOfJs1', function ($scope, $http) {
   $http.post("url", data).success(function(data, status) {
      $scope.hello = data;
   })
})

JS2文件：

var app = angular.module('myApp', []);
app.controller('myCtrlOfJs2', function ($scope, $http) {
   // $http.post("url", data).success(function(data, status) {
     // $scope.hello = data;
  // })
})

我不想要的是重写相同的code两次。然后我想在我的JS1文件中，在JS2文件中调用该函数。有可能吗？

PS：这只是一个例子，我的代码有比它更多的行。

感谢任何帮助。感谢。

Answer 1

您始终可以使用服务：https://docs.angularjs.org/guide/services

app.factory('commonFeatures', function($http) {
    return {
        setHelloMsg: function(scope) {
           $http.post("url", data).success(function(data, status) {
               scope.hello = data;
           })
        }
    };
});

app.controller('myCtrlOfJs1', function ($scope, commonFeatures) {
    commonFeatures.setHelloMsg($scope);
});

修改：作为对您评论的回复：

嗯，可以几乎无处不在。看看https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility。有更多的风格指南，但我个人遵循这个，它只是有道理。

您的观点根本不需要改变。

Answer 2

通常，您希望将这样的常见功能分离为角度服务：https://docs.angularjs.org/guide/services

在此示例中，它可能如下所示：

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

andyModule.factory('helloDataService', function($http) {
    var helloDataService = {
        // returns a promise
        getHelloData = function() {
            return $http.post("url", data)
        }
    };
    return shinyNewServiceInstance;
});

在您的控制器中

app.controller('myCtrlOfJs1', function ($scope, $http, helloDataService) {
    helloDataService.getHelloData().success((data)=> {
        $scope.data = data;
    })
})

Answer 3

我会将其抽象为服务。服务是网络电话等特别好的选择。

顺便使用angular.module("app", modules)语法将创建一个名为app的应用程序，因此JS2文件将覆盖JS1中的模块。我怀疑你是否打算这样做。

angular.module("app", []);

var app = angular.module('myApp');
app.controller('myCtrlOfJs1', function ($scope, hello) {
  hello.post().then(data => scope.$hello = data);
});

var app = angular.module('myApp');
app.controller('myCtrlOfJs2', function ($scope, hello) {
  hello.post().then(data => scope.$hello = data);
});

app.factory("hello", function ($http) {
  // set data somehow
  return {
      post() {
        return $http.post("url", data);
      },
  };
});

这仍然会复制scope.$hello代码，这可能是您想要避免的代码。在这种情况下，您可以使用更新的class语法或原型从另一个实现此功能的控制器进行扩展。在这种情况下，我认为最好使用controllerAs代替$scope.

Answer 4

这是一种可以实现所需目标的方法。我更喜欢服务方法

看看这个：

use case for $controller service in angularjs

https://docs.angularjs.org/api/ng/service/ $控制器

希望有所帮助

如何从AngularJS中的另一个文件调用控制器？

4 个答案: