将 angular 路由器 ui 与 trNgGrid 问题一起使用

Question

我一直在开发一个相当大的应用程序，并且开始比以前更深入地研究 AngularJS。我以前做过的大部分事情都非常简单（图片库、导航等），而且我从来没有使用过多个控制器、模块和插件。

现在我有两个插件（Angular UI Router 和 trNgGrid）我想一起使用，但它们似乎不能很好地协同工作。

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

我有一个主模板（索引），然后我使用带 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}];
    }]);

将 angular 路由器 ui 与 trNgGrid 问题一起使用

using angular router ui with trNgGrid issues

javascript

jquery

angularjs

angular-ui-router