с использованием углового маршрутизатора ui с проблемами trNgGrid

Question

Я работаю над довольно большим приложением и начинаю копать гораздо глубже в AngularJS, чем раньше. Большинство вещей, которые я делал раньше, были довольно простыми (галереи изображений, навигация и т. Д.), И у меня никогда не было нескольких контроллеров, модулей и плагинов.

Теперь у меня есть два плагина (Angular UI Router и trNgGrid), которые я пытаюсь использовать вместе, и они, похоже, не работают очень хорошо вместе.

Страница, в которой я использую trNGrid, является внутренней страницей. У меня есть функция поиска, которая должна возвращать JSON-файл, и мне нужно взять данные и поместить их в таблицу с некоторыми базовыми элементами управления сеткой.

У меня есть один основной шаблон (индекс), а затем я использую частичные с UI-маршрутизатором, чтобы динамически вставлять HTML-страницы для разных страниц.

страница поиска HTML выглядит следующим образом:

Результаты поиска

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

    </table> 
</div> 

Тогда у меня есть оба интерфейса маршрутизатора и trNgGrid модули в одном файле app.js:

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}]; 
    }]);