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

17 浏览
0 Comments

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

我有一个模块，我在其中配置了一个路由，如下所示：

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

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

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

如果我将脚本移到我的主页面（加载angular模块的地方），控制器就会正确加载。

主页面：

我希望在需要它们的页面上加载各种控制器，以免给应用程序增加负担，因为它们都加载在主页面上。

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

似乎我可以通过在路由中使用'resolve'来加载脚本：

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

这样做正确吗？

0

3 答案

0 Comments

问题的原因是在Angular模块文件中，使用了ng-view指令来加载模板页面中的控制器，但是在模板文件中没有指定控制器的位置。

解决方法是在模板文件中添加ng-controller指令，并指定要加载的控制器的名称。

修改后的模板文件如下：

<div id="dvcollection" ng-controller="SubjectsController">
    <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>

这样，ng-view指令就可以正确加载模板页面中的控制器了。

0
0 Comments

问题的原因是在解析器(resolveController)中没有注入$rootscope，因此代码中的$scope被替换为$rootscope。解决方法是在解析器中注入$rootscope，并将其作为参数传递给解析器函数。以下是修改后的代码：

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 }
    })
});

希望这对你有所帮助。在这个问题中，你可以找到关于这个主题的有趣讨论。

0
0 Comments

在模板页面中，有一个问题出现了，即ng-view无法加载控制器。原因是在模板中存在一个错误的控制器名称，导致ng-view无法正确加载对应的控制器。

解决这个问题的方法是在模板中移除data-ng-controller="SubjectController"。另外，还需要确认控制器的名称是否正确。在这个例子中，有人提醒检查SubjectController的名称是否正确，但最后确认是一个写错的错误。

以下是整理好的

在模板页面中，遇到了一个问题，即ng-view无法加载控制器。经过排查，发现问题出现在模板中错误的控制器名称。解决这个问题的方法是在模板中移除data-ng-controller="SubjectController"。另外，还需要确认控制器的名称是否正确。在这个例子中，有人提醒检查SubjectController的名称是否正确，但最后确认是一个写错的错误。

代码示例：

正确的做法是移除data-ng-controller属性：

通过以上的修正和确认，问题得到了解决。

0