Question

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

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>

通过这种方式，控制器未定，似乎脚本没有正确加载到页面中。

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

MasterPage：

<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未定义。

这是正确的方法吗？

Answer 1

试试这个：删除data-ng-controller =＆＃34; SubjectController＆＃34;来自模板

Answer 2

在您的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>

Answer 3

在您编辑之后，似乎您没有在解析器中“注入”$ 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
    })
}

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

希望得到这个帮助，通过有趣的讨论找到this question这个主题。

Answer 4

你需要这样做：

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

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

4 个答案: