0

次のようなルートを構成するモジュールがあります。

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>

このように、コントローラーは定義されておらず、スクリプトがページに正しく読み込まれていないようです。

スクリプトをマスター ページ (angular モジュールをロードする場所) に移動すると、コントローラーが正しくロードされます。

マスターページ:

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

それらはすべてマスターページにロードされるため、アプリケーションに負担をかけないように、必要なページにさまざまなコントローラーをロードしたいと思います。

**** - 編集 - ****

route で「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 is not defined.

それは正しい方法ですか？

4

4 に答える 4

0

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>
于 2016-02-29T10:51:00.630 に答える
0

編集後、リゾルバーに $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 が定義されていないので注入しました。

このヘルプを願って、それについての興味深い議論で、件名に関するこの質問を見つけました。

于 2016-03-03T11:00:14.287 に答える