Angular - 如何在模块之间共享控制器

Angular - how to share a controller across modules?

本文关键字：之间 共享 控制器 模块 Angular      更新时间：2023-09-26

我目前正在使用的模块正在复制粘贴另一个模块的代码。显然这是不对的，所以我试图包含共享资源（模块）以避免这种冗余。

以下是设置的草图：

angular.module('shared', []);
angular.module('shared').controller('SharedController', SharedControllerFunc);
function SharedControllerFunc(/*params*/) {
    /*logic*/
}
angular.module('app', ['shared']);
angular.module('app').controller('myController', myControllerFunc);
console.log(angular.module('app').controller('SharedController'));
//looks good!
//HTML template
<div ng-controller="myController">
  <div ng-controller="SharedController" ng-include="other-template.html"></div>
</div>

并且共享控制器不存在。

我的问题是：如何正确解决该SharedController？我尝试使用 $controller 服务并在 MyController 范围内创建SharedController，但看起来它存在传递依赖项问题（Unknown provider SharedController错误）。

必须有一种干净，简单的方法来做到这一点，这是我忽略的。

我在这里为你做了一个例子：http://plnkr.co/edit/dBDyYPd3ZoUVdXngu52t?p=preview

如果您有 2 个带有模块的文件 - 应用程序和共享：

//app.js
var app = angular.module('app', ['shared']);
app.controller('myController', myControllerFunc);
function myControllerFunc($scope) {
  $scope.test = 'myControllerFunc';
   console.log('myControllerFunc called');
}

//shared.js
var shared = angular.module('shared', [])
shared.controller('SharedController', SharedControllerFunc);
function SharedControllerFunc($scope) {
  $scope.test = 'SharedControllerFunc';
   console.log('SharedControllerFunc called');
}

稍后，您可以在另一个控制器中继承一个控制器：

<div ng-controller="myController">
{{test}}
  <div ng-controller="SharedController">
    {{test}}
  </div>
</div>
通常，在

ng-controller中重用控制器表明需要一个指令或服务来执行常见任务并保持代码库干燥。但是，同一控制器可以在多个指令或路由中重复使用。

列出的代码很好。除了这个：

console.log(angular.module('app').controller('SharedController'));

controller方法不用于返回已注册控制器的工厂函数。它基本上等于覆盖控制器

angular.module('app').controller('SharedController', undefined);
相关文章：