ng-view - 在模板页面中加载控制器答案

【问题标题】：ng-view - Load Controller in template pageng-view - 在模板页面中加载控制器
【发布时间】：2016-06-12 08:56:51
【问题描述】：

我有一个模块，我在其中配置这样的路由：

var app = angular.module("myModule", ['ui.grid','ui.bootstrap','ngRoute']);
app.config(function ($routeProvider) {
        $routeProvider.when('/subjects', {
            templateUrl: 'Subjects.aspx',
            controller: 'SubjectsController'
        })
    }

在模板页面中，我这样配置控制器：

<script src="/Scripts/SPScripts/Services/SubjectService.js"></script>
<script src="/Scripts/SPScripts/Controllers/SubjectController.js"></script>

        <div id="dvcollection" data-ng-controller="SubjectController">
            <div style="padding-left: 15px; padding-bottom: 10px;">
                <button type="button" id="addRow" class="btn btn-success" data-ng-click="addRow()">Nuovo</button>
            </div>
            <div class="gridStyle" data-ui-grid="gridOptions"></div>
        </div>

这样控制器是未定义的，并且似乎脚本没有正确加载到页面中。

如果我在我的母版页（我加载角度模块的地方）中移动脚本，控制器就会正确加载。

母版页：

<script src="/Scripts/SPScripts/Modules/Module.js"></script>
<div class="container body-content"  data-ng-app="myModule">
            <div data-ng-view></div>
        </div>

我想在需要的页面上加载各种控制器，以免给应用程序带来负担，因为它们都加载到母版页中。

**** - 编辑 - ****

似乎我可以通过在路由中使用“解决”来加载脚本：

var resolveController = function (path) {
  var deferred = $q.defer();
  var script = document.createElement('script');
  script.src = path;
  script.onload = function () {
    $scope.$apply(deferred.resolve());
  };
  document.body.appendChild(script);
  return deferred.promise;
};

app.config(function ($routeProvider) {
        $routeProvider.when('/subjects', {
            templateUrl: 'Subjects.aspx',
            controller: 'SubjectsController',
            resolve: resolveController('/Scripts/SubjectController.js')
        })
    }

但我检索到错误：$q 未定义。

方法对吗？

【问题讨论】：

Using AngularJS routing and loading controllers on demand using requirejs的可能重复
我认为你需要强调你想要什么，因为我看到的答案完全脱离了上下文。我从您的问题中可以理解的是，您希望特定模板所需的脚本文件仅包含在模板中，而不包含在母版页中
是的，我会在各种模板页面中加载脚本文件，但似乎我的方法是错误的

标签： javascript angularjs angular-ui-router ng-view ng-controller

【解决方案1】：

你需要这样做：

$injector = angular.injector(['ng']);
q = $injector.get('$q');
var deferred = q.defer();

【讨论】：

【解决方案2】：

在您编辑之后，您似乎没有在解析器中“注入”$q：

var resolveController = function ($q,$rootscope) {
  var deferred = $q.defer();
  var script = document.createElement('script');
  script.src = '/Scripts/SubjectController.js';
  script.onload = function () {
    $rootscope.$apply(deferred.resolve());
  };
  document.body.appendChild(script);
  return deferred.promise;
};

app.config(function ($routeProvider) {
    $routeProvider.when('/subjects', {
        templateUrl: 'Subjects.aspx',
        controller: 'SubjectsController',
        resolve: { resolveController: resolveController
    })
}

我已将 $scope 替换为 $rootscope 并将其注入，因为 $scope 未定义。

希望对您有所帮助，发现 this question 对此主题进行了有趣的讨论。

【讨论】：

【解决方案3】：

在您的 Angular 模块文件中：

var app = angular.module("myModule", ['ui.grid','ui.bootstrap','ngRoute']);
app.config([ $routeProvider , function ($routeProvider) {
        $routeProvider.when('/subjects', {
            templateUrl: 'Subjects.aspx',
            controller: 'SubjectsController'
        });
    }])

然后在您的模板文件中

<div id="dvcollection" >
            <div style="padding-left: 15px; padding-bottom: 10px;">
                <button type="button" id="addRow" class="btn btn-success" data-ng-click="addRow()">Nuovo</button>
            </div>
            <div class="gridStyle" data-ui-grid="gridOptions"></div>
        </div>

在您的母版页中

<script src="/Scripts/SPScripts/Modules/Module.js"></script>
<div class="container body-content"  data-ng-app="myModule">
        <div data-ng-view></div>
</div>

【讨论】：

【解决方案4】：

试试这个：从模板中删除 data-ng-controller="SubjectController"

【讨论】：

SubjectController 还是 SubjectsController？
请检查控制器中的 SubjectController 名称
对不起，名字是正确的。这只是一个写作错误