使用角路由器用戶界面與trNgGrid問題

Question

我一直在研究一個相當大的應用程序，並開始深入AngularJS挖掘，然後我有。我之前完成的大多數工作都非常簡單（圖像庫，導航等），我從來沒有多個控制器，模塊和插件。

現在我有兩個插件（Angular UI Router和trNgGrid），我試圖一起使用它們，它們看起來並沒有很好地協同工作。

我使用的頁面trNGrid是一個內部頁面。我有一個應該返回一個JSON文件的搜索功能，我需要把這些數據放到一個帶有一些基本的網格控件的表格中。

我有一個主要模板（索引），然後我用UI路由器爲各種頁面動態插入HTML。

搜索頁面的HTML如下：

搜索結果

<div ng-controller="MainCtrl"> 
    <table tr-ng-grid items='myItems'> 

    </table> 
</div> 

然後，我有兩個UI路由器和在同一app.js文件trNgGrid模塊：

var routerApp = angular.module('routerApp', ['ui.router']); 

routerApp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
     .state('home', { 
      url: '/home', 
      templateUrl: 'global/partials/home.html' 
     }) 
     .state('search', { 
      url: '/search', 
      templateUrl: 'search/partials/search.html' 
     }) 
}); 


angular.module('routerApp', ['trNgGrid']) 
    .controller("MainCtrl", ["$scope", function ($scope) { 
     $scope.myItems = [{name: "Moroni", age: 50}, 
       {name: "Tiancum", age: 43}, 
       {name: "Jacob", age: 27}, 
       {name: "Nephi", age: 29}, 
       {name: "Enos", age: 99}]; 
     }]); 

當你點擊搜索頁面，沒有任何反應，它似乎打破了一切。沒有控制檯警告，沒有任何東西。把trNgGrid模塊拿出來，一切正常。

我的ng-app指令有引導應用程序的功能，我已經檢查過以確保沒有404錯誤，並且所有腳本都已就位，並且它們都在index.html上加載頁。

我應該把trNgGrid模塊放在一個單獨的文件中嗎？這將是一個很大的應用程序，因此在不同文件中包含大量不同的模塊似乎是一個臨時性的修復，稍後會引起我頭痛的問題。

現在，我只是試圖讓這兩個一起工作。如果還有另一種更容易處理的替代方案，那我就很好。

Answer 1

我相信你這條線覆蓋你的模塊：

angular.module('routerApp', ['trNgGrid']) 

儘量不要做這樣的：

var routerApp = angular.module('routerApp', ['ui.router', 'trNgGrid']); 

routerApp.config(function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise('/home'); 

$stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'global/partials/home.html' 
    }) 
    .state('search', { 
     url: '/search', 
     templateUrl: 'search/partials/search.html' 
    }) 
}); 


routerApp.controller("MainCtrl", ["$scope", function ($scope) { 
    $scope.myItems = [{name: "Moroni", age: 50}, 
      {name: "Tiancum", age: 43}, 
      {name: "Jacob", age: 27}, 
      {name: "Nephi", age: 29}, 
      {name: "Enos", age: 99}]; 
    }]);