Question

我想将我的控制器拆分为两个 - Todos和Tags，现在我在一个文件中都有。但我不知道怎么告诉angularJS。我试图拆分它，但后来我的HTML指令不再有效。我的意思是在我的HTML中我有两个不同控制器的两个函数（如果我拆分它们），我需要调用它们而不需要任何控制器的其他实例。我怎么能这样做？

我已经从这个例子中删除了一些不相关的代码并用点替换了它，但是如果有人发现它很重要的话，我写了评论。

这是我的JS：

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

... // here is some rest api code for Todos

todoApp.controller('TodoCtrl', ['$scope', 'dataService', function($scope, dataService) {

...

    $scope.addTodo = function () {
        var newTodo = $scope.newTodo.trim();
        if (!newTodo.length) {
            return;
        }

... // more code follows up about Todo functions

    $scope.addTag = function () {
    var newTag = $scope.newTag.trim();
    if (!newTag.length) {
        return;
    }

... // more code follows up about Tag functions

，这是我的HTML

<div ng-controller="TodoCtrl">
...

<div class="row" id="topnav">
    <div class="col-md-12">
        <form ng-submit="addTodo()">
            <input type="text" id="inputNewTodo" placeholder="Create new todo" ng-model="newTodo" />
        </form>
        <form ng-submit="addTag()">
            <input type="text" id="inputNewTag" placeholder="Create new tag" ng-model="newTag" />
        </form>
    </div>
</div>

...
</div>

如果有人有兴趣，您可以在http://taskybird.com/

查看实时代码

Answer 1

控制器包含专用于特定视图/视图模型的逻辑。如果站点上的视图（或组件）包含这两个按钮，则这些功能属于同一个控制器。这并不意味着业务逻辑不能被分离（例如通过使用服务）！

Answer 2

您可以使用ng-controller属性为视图的不同部分使用不同的控制器。如果您只需要模块化代码，可以创建单独的模块并将它们注入主app.js文件中。

EG。 var myApplication = angular.module("myApplication", ["mySharedElements"]); 这里，mySharedElements是在单独文件中定义的另一个模块。此方法有助于隔离一个控制器中使用的不同依赖项。

Answer 3

如果要扩展范围或rootcope，请创建控制器。如果您不想扩展范围（创建子范围）;你不需要控制器。

Answer 4

Angularjs遵循MVC架构，如您所知，我们的SPA具有单个/多个视图，每个视图/功能可以有多个控制器。控制器是我们使用范围定义视图对象行为的文件。在每个视图/功能中，您可以提到特定的控制器。

AngularJS - 如何拆分控制器？

4 个答案: