Question

我刚开始学习AngularJS并构建了一个小而简单的应用程序，它包含多个控制器，如下所示：

我有一个SiteMaster.html页面，在此页面中我使用ng-view，如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/app.js"></script>  <!-- Consists of Routing  -->
    <script src="Templates/Params/paramsController.js"></script>

    <title>Angular Routing Tutorial</title>
</head>
<body ng-app="mainApp">
    <h1>sitemaster Template</h1>
    <div ng-view></div>
</body>

</html>

正如您所看到的那样，最后一个脚本标签是params页面的控制器，理想情况下我不想在SiteMaster上使用此脚本标记引用，而是希望将它放在params.HTML页面中，这样它才会被加载如果需要，现在我已将此脚本代码从SiteMaster.Html移至params.Html页面，如下所示：

<script src="paramsController.js"></script>

<div ng-controller="paramsCtrl">
  <h1>
      Passed a parameter via url
  </h1>
</div>

然而，当我运行该项目时，我收到以下错误：

Error: [ng:areq] http://errors.angularjs.org/1.5.2/ng/areq?p0=paramsCtrl&p1=not%20a%20function%2C%20got%20undefined

所以我的问题是，如何在paramsController.js页面中使用此params.html引用？而不是在SiteMaster.html页面上？

请注意，当paramsController.js放置在SiteMaster.Html页面内时，它会按预期工作。

任何帮助都将不胜感激。

更新添加ocLazyLoad后，我完成了以下操作：

添加了对sitemaster.html的脚本引用

在我的app.js中，我做了以下事情：

var app = angular.module('mainApp', ['ngRoute', "oc.lazyLoad"]);

在我的paramsController.js中，我有以下内容：

angular.module("mainApp").controller('paramsCtrl', function ($scope, $routeParams, $ocLazyLoad) {

console.log($routeParams);

var param1 = $routeParams.page_number;

alert(param1);

});

现在我遇到了一个障碍，我不确定在哪里或如何通过ocLazyLoad加载这个控制器？我遵循此文档：https://oclazyload.readme.io/docs

Answer 1

首先，你的道路是错误的。变化

<script src="paramsController.js"></script>

到

<script src="Templates/Params/paramsController.js"></script>

另外，请在<head>部分中添加以下内容：

<base href="/">

第二件事，我不确定，即使那个因为Angular已经被初始化也行不通。因此，您需要使用像ocLazyLoaded这样的库来动态加载资源。

另外，请考虑阅读此帖https://stackoverflow.com/a/17675432/2405040

<强>更新

在params.html

中

<!-- Remove this line
<script src="paramsController.js"></script>
-->

<div ng-controller="paramsCtrl">
    <h1>
        Passed a parameter via url
    </h1>
</div>

现在修改您的$routeProvider配置：

（来自文档https://oclazyload.readme.io/docs/with-your-router）

$routeProvider.
    when('/foo', {
        templateUrl: 'Templates/Params/params.html',
        resolve: {
            loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                 // you can lazy load files for an existing module
                return $ocLazyLoad.load('Templates/Params/paramsController.js');
            }]
        }
    })

AngularJS控制器参考变为未定义

1 个答案: