Question

我一直在研究一个相当大的应用程序，并且我开始在AngularJS中深入挖掘，然后我才开始。我以前做的大部分内容都很简单（图片库，导航等），我从来没有多个控制器，模块和插件。

现在我有两个插件（Angular UI Router和trNgGrid），我正在尝试一起使用它们似乎并没有很好地协同工作。

我正在使用trNGrid的页面是一个内部页面。我有一个应该返回JSON文件的搜索功能，我需要获取数据并将其放入带有一些基本网格控件的表中。

我有一个主模板（索引），然后我使用UI路由器的部分动态为各种页面动态插入HTML。

搜索页面html如下所示：

搜索结果

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

    </table>
</div>

然后我在同一app.js文件中同时拥有UI路由器和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}];
    }]);

使用角度路由器ui与trNgGrid问题

1 个答案: