NG-視圖 - 在模板頁面負載控制器

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> 

通過這種方式，控制器未確定，似乎腳本沒有正確加載到頁面中。

如果我移動我的母版頁（我加載角模塊）的腳本，控制器正確加載。

母版：

<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

嘗試這個辦法：從模板

刪除數據-NG-控制器= 「SubjectController」

Answer 2

在你的角模塊文件：

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> 

在你的主頁Page

<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並注入它作爲$範圍沒有定義。

希望這個幫助，發現this question關於這個問題有一個有趣的討論。

Answer 4

你需要這樣做：

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