ng-view - Контроллер загрузки на странице шаблона

У меня есть модуль, в котором я настраиваю маршрут следующим образом:

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 не определен.

Это правильный путь?


javascript angularjs angular-ui-router ng-controller ng-view
person lpernice    schedule 29.02.2016    source источник
comment
Возможный дубликат Использование контроллеров маршрутизации и загрузки AngularJS по запросу с использованием требуют   -  person Zakaria    schedule 29.02.2016
comment
Я думаю, вам нужно выделить то, что вы хотите, потому что ответы, которые я вижу, полностью вырваны из контекста. Все, что я могу понять из вашего вопроса, это то, что вы хотите, чтобы файлы сценариев, необходимые для конкретного шаблона, были включены только в шаблоны, а не на главную страницу.   -  person Sunil Lama    schedule 29.02.2016
comment
да, я бы загрузил файлы сценариев на различных страницах шаблонов, но кажется, что мой подход неверен   -  person lpernice    schedule 29.02.2016

Ответы (4)


arrow_upward
0
arrow_downward

попробуйте это: удалите data-ng-controller="SubjectController" из шаблона

person Hadi J    schedule 29.02.2016
comment
Субъектконтроллер или Субъектконтроллер? - person Hadi J; 29.02.2016
comment
пожалуйста, проверьте имя SubjectController в контроллере - person Hadi J; 29.02.2016
comment
извините, имя верное. это просто ошибка в написании - person lpernice; 29.02.2016

arrow_upward
0
arrow_downward

В вашем файле модуля 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>
person Amulya Kashyap    schedule 29.02.2016

arrow_upward
0
arrow_downward

после вашего редактирования кажется, что вы не «ввели» $ 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 не определен.

Надеюсь, что это поможет, нашел этот вопрос по этому вопросу с интересной дискуссией по этому поводу.

person PaulCo    schedule 03.03.2016

arrow_upward
0
arrow_downward

Вам нужно сделать это:

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