AngularJS:AppLevel Controller 可能吗？

Question

我有一个 Controller ，它是我页面的 Controller ，但我想知道是否有可能有一个 AppLevel Controller ，即可以从每个页面访问的东西......所以每个页面实际上会分配超过 1 个 Controller 。

我知道我可能可以通过服务来做到这一点并注入(inject)服务，但我希望有某种可以分配的 applevel Controller 。

如果可能的话，我将如何在两者之间进行通信？我假定使用依赖项注入(inject)并将 applevel Controller 传递到我的主页？

有人对此有想法吗？

谢谢

Answer 1

AngularJS 利用 JavaScript 原型(prototype)继承来让作用域访问父作用域的属性。您可以定义嵌套在 HTML 中的 Controller 并从子项访问父项。但是，我强烈建议您不要将此事实用于您的“AppCtrl”。在某些情况下，您正在处理的范围将被隔离，并且不会成为可以访问 AppCtrl 范围的继承层次结构的一部分。

我建议为此创建一个服务，或者您可以将 pub/sub 与 $rootScope.$on 和 $rootScope.$broadcast 一起使用。

为了展示服务示例，我将使用 shellCtrl 和 shell 服务来代替应用程序，以使示例更清晰一些。

“shell”服务的工作是允许应用中的任何其他 Controller 、指令或服务与 shellController 交互，从而与宿主视图容器交互。

<div ng-app="myApp" ng-controller="ShellCtrl">
    <div ng-controller="SomeOtherCtrl"></div>
</div>

// parent controller defined on the same element as ng-app
function ShellCtrl($scope, shell) {
    // I've just made the shell accessible to the $scope of shellctrl, but you can do
    // this in various ways.
    $scope.shell = shell;
}

// any other controller
function SomeOtherCtrl($scope, shell) {
    shell.setTitle('Some title');
}

// basic example of the shell service
angular.module('myApp').factory('shell', function () {
    return {
        title = 'No title set',
        setTitle = function (title) {
            this.title = title;
        }
    }    
});

现在您可以在不依赖范围层次结构的情况下以分离的方式在父 Controller 上设置属性。