Javascript 角度——从另一个控制器调用特定于控制器的函数的最佳实践是什么？

我对棱角分明的人比较陌生。我正在制作一个应用程序，它以表单形式获取数据，并将其保存为MongoDB中的对象。我有一个在应用程序中始终存在的侧栏的控制器和指令，它列出了所有保存的对象。在此控制器中，我有一个更新列表的函数：

$scope.refreshList = function(){
  //http call to database & refresh list accordingly
};

然后，为了使该函数可以从其他控制器调用，我有以下内容：

$window.refreshList = $scope.refreshList;

例如，我可以从表单提交函数调用

$window.refreshList

，在提交新对象时更新表单

---

我觉得这可能不是最好的做法。请记住，

refreshList

函数依赖于列表控制器中定义的一些变量，最好的方法是什么？

这不是控制器的使用方式。控制器始终绑定到单个视图。如果您想在整个应用程序中共享数据或功能，则应该考虑使用服务。

  app.service("serverCalls", function(){
     this.refreshListFromServer = function() {
         // Logic to get data from server and returning promise which can be resolved in your controller.
      }
   })

一个很好的做法是让服务处理对服务器的所有调用。

---

然后，您可以在需要访问api调用的每个控制器中导入服务。

要在应用程序的不同部分共享功能，您应该使用服务

例如：

app = angular.module( 'app' );

app.service( 'Backend', [ function () {
    this.refreshList = function () {
      //http call to database & refresh list accordingly
    };
} ] );

app.controller( 'Controller1', [ '$scope', 'Backend', function ( $scope, Backend ) {
    Backend.refreshList().then( function ( results ) {
        // work with the results and the scope here
    } );
} );

// And reuse the code in other controllers
app.controller( 'Controller2', [ '$scope', 'Backend', function ( $scope, Backend ) {
    Backend.refreshList().then( function ( results ) {
        // work with the results and the scope here and do something different
    } );
} );

---

Angular是一个为您简化事情的框架。它对如何组织代码有自己的指导原则，因此有范围、控制器、服务等概念

现在回到您的问题，关于如何使两个控制器之间通信或共享数据，或者如何从另一个控制器调用一个控制器函数

首先假设您有两个控制器，一个主控制器控制索引页面，该页面有侧栏（列表侧栏）、顶栏和一个视图，我们在其中加载所有其他页面

所以你的基本结构如下

  <div id="main" ng-controller="MainController">
     <nav id="sideBar"> <!-- Your list where items are dynamically shown --></nav>
     <div id="view" ng-view><!-- This is where you will load your templates dynamically --></div>
   </div>

//This will get the dataObj, sent by emitter.
$scope.$on("refreshSideBar", function(event, dataObj){
  $scope.refreshList(dataObj);
})

现在假设您的主控制器有一个方法

$scope.refreshList（）

，它将从服务

serverCalls.refreshListFromServer（）调用您的方法并刷新侧栏

$scope.refreshList = function() {
 serverCalls.refreshListFromServer().then(function(){
   // logic to handle response returned from server.
 })
}

现在，如果表单由另一个控制器（可能是表单控制器）提交，那么在表单成功提交后，您可能希望重新加载侧栏，为此，您可以在
MainController
中的一个方法上设置侦听器，如下所示：

  <div id="main" ng-controller="MainController">
     <nav id="sideBar"> <!-- Your list where items are dynamically shown --></nav>
     <div id="view" ng-view><!-- This is where you will load your templates dynamically --></div>
   </div>

//This will get the dataObj, sent by emitter.
$scope.$on("refreshSideBar", function(event, dataObj){
  $scope.refreshList(dataObj);
})

在您的
FormController
中，您可以
emit
我们在上面的
MainController
中坐过的侦听器将拾取的事件

//dataObj can be any arbitrary data you want to pass to listener.
$scope.$emit("refreshSideBar", dataObj);

$emit:通过作用域层次结构向上发送事件名称，通知已注册的$rootScope.scope侦听器