使用角路由器用户界面与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}]; 
    }]);