AngularJS 控制器即服务或服务即控制器

Question

在创建仪表板应用程序时，我遇到了需要将 AngularJS 控制器和服务合二为一的情况。

在主（第 1）页我有 mainController（没有布局）和 layoutController，它使用方法 loadLayoutFromAPI() 和 saveLayoutToAPI() 绑定到按钮。

现在，在中学（二年级）只有 secondController 而没有 layoutController。我需要直接从 secondController 使用 layoutController 的方法，我不希望在 HTML 中插入 ng-controller 指令（而是通过依赖将其放入 secondController -注入服务）。

主页（第 1 个）：

<div ng-controller="mainController">
    <!-- some other code -->

    <div ng-controller="layoutController as ctrl">
        <a href="#" ng-click="ctrl.loadLayoutFromAPI()">Load</a>
        <a href="#" ng-click="ctrl.saveLayoutToAPI()">Save</a>
    </div>
</div>

二级页面（第 2 个）：

<div ng-controller="secondController">
    <!-- some other code -->
</div>

我试图寻找这个问题，但根本没有找到答案。

问题：我应该如何使用同一段代码（方法save()和load()）一次作为控制器（ng-controller）和其他时间作为服务（通过 dependency-injection 包含）？

谢谢

JS Bin 根据要求

Answer 1

您可以使用 $broadcast 来实现这一点。

下图解释了这个概念。

controller-2 中的示例代码

$rootScope.$broadcast('saveCalled');

controller-1 中的示例代码

 $scope.$on('saveCalled',function(){
       saveLayoutToApi();
    })

Answer 2

不要直接从其他控制器使用其他控制器的方法...这就是服务存在的原因。控制器只在那里与视图互动！

如果你想在控制器、指令或任何其他服务、工厂和提供者之间进行通信。在构建任何应用程序时，您总是将通用功能抽象为某种服务

例如：

//Just an APP def
var app = angular.module('dashApp', []);

//LayoutController
app
  .controller('layoutController', ['CtrlService', function(ctrlService){
  this.saveLayoutToAPI = function(){
    ctrlService.save();
  }
  this.loadLayoutFromAPI = function(){
    ctrlService.load();
  }
}]);

//Main Controller
app
  .controller('mainController', function(){
  //no work with layout at all
});

//Secondary controller

app
  .controller('secondController', ['CtrlService', function(ctrlService){
  this.save = function(){
     ctrlService.save();
  }
  this.load = function(){
     ctrlService.load();
  }
}]);

app
  .service('CtrlService', function () {  

    var obj = {
      save: function () {
        console.log('Layout saved.');
      },
      load: function () {
        console.log('Layout loaded.');
      }
    }

    this.save = obj.save;
    this.load = obj.load;
  });

AngularJS 控制器即服务或服务即控制器

AngularJS Controller as service or service as controller

javascript

angularjs

angularjs-service

angularjs-controller