Question

以下是我的应用程序布局：

enter image description here

app.html 代码如下：

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <title>My AngularJS App</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="/static/app/controllers.js"></script>
</head>
<body>
    <ul class="nav">
        <li><a href="#admin">Admin</a></li>
        <li><a href="#sales">Sales</a></li>
        <li><a href="#purchase">Purchase</a></li>
    </ul>

    <div ng-controller="AppCtrl" ng-include="view.url">
    </div>

</body>
</html>

/static/app/controllers.js 是：

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

app.controller('AppCtrl', ['$scope', '$location',
    function ($scope, $location) {

        $scope.$watch(
            function () {
                return $location.path();
            },
            function (path) {
                var moduleName = path.split("/")[1];
                if (moduleName) {
                    $scope.view = { url: "/static/app/" + moduleName + "/" + moduleName + ".html" };
                }
            });

    } ]);

现在让我们说 admin.html ：

<div>
    <p>Admin</p>
</div>

和sales.html以及purchase.html几乎相同。然后我的应用程序的导航工作正常;单击管理员链接时，将加载并显示admin.html。但如果 admin.html 如下：

<div>
    <p>Admin</p>
    <script src="/static/app/admin/controllers.js"></script>
    <div ng-controller="AdminCtrl" ng-include="subView.url">
    </div>
</div>

和 /app/admin/controllers.js 是

var admin = angular.module('MyApp.Admin', []);

admin.controller('AdminCtrl', ['$scope', '$location',
    function ($scope, $location) {


    } ]);

然后点击管理员链接时，Google Chrome控制台会抛出以下错误：

Error: Argument 'AdminCtrl' is not a function, got undefined
    at Error (<anonymous>)

如果我将AdminCtrl移动到/app/controllers.js，那么它可以工作;但我希望它在自己的目录中。有人可以帮我弄这个吗？此外，下一步是显示“subView”，类似于导航“view”。任何暗示都将非常感激。

Answer 1

您需要将MyApp模块（在其定义中）与您的MyApp.Admin模块联系起来：

angular.module('MyApp', ["MyApp.Admin"]);

但对于较大的应用，您可能需要查看UI-Router project而不是......

AngularJS嵌套视图＆amp;控制器

1 个答案: