angularjs 如何在同一模块的 2 个单独页面上路由 2 个单独的控制器

Question

我有一个主页，其中包含模块、路由、工厂和控制器。下面是第一页，然后我粘贴到第二页。

var myApp = angular.module('myApp', ['angularjs-dropdown-multiselect', 'myModule', 'ngMaterial',  'ui.router', 'angularMoment', 'breeze.directives', 'breeze.angular', 'ui.bootstrap.pagination']).run(['breeze', function (breeze) { }]);;
myApp.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    $urlRouterProvider.otherwise("/Ordering");
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];

    $stateProvider       
        .state('Ordering', {
            url: '/Ordering',
            templateUrl: '/App/js/Ordering/Ordering.html'
        })
    .state('OrderingDetails', {
        url: '/OrderingDetails',
        templateUrl: '/App/js/Ordering/partials/OrderingDetails.html',
        controller: 'QtyUsedDetailsCtrl',
        resolve: {
            fromDate: function ($stateParams) {    
                return $stateParams.fromDate;
            },
        }
    })

});

myApp.config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
      .primaryPalette('blue-grey');
})

.controller('AppCtrl', ['$scope', '$mdSidenav', function ($scope, $mdSidenav) {
    $scope.toggleSidenav = function (menuId) {
        if ($scope.lockedOpen) {
            $scope.lockedOpen = "";
        }
        else {
            $scope.lockedOpen = "md-locked-open";
        }
    };

}])

.controller('OrderingListCtrl', [
    '$scope','$http', '$q', '$filter', '$location', '$window','$state','$stateParams', 'mydatacontext', 'breeze', 'OrderingService',
    function ($scope, $http, $q, $filter, $location, $window, $state, $stateParams, mydatacontext, breeze, OrderingService) {
    }
])

.factory('OrderingService', ['$http','mydatacontext', function ( $http, mydatacontext) {

    function loadDetails(filter) {
        console.log(breeze);

        return $http({
            method: 'GET',
            url: '/FabuServices/Status',
            params: { fromDate: filter.fromDate)
        }).then(function (result)
        { return result.data; })
    };  

}]);

这是我的第二页，它似乎无法识别我第一页的工厂。

'use strict'

angular.module('myApp')

.controller('QtyUsedDetailsCtrl', ['$scope', 'OrderingService', '$stateParams',
function QtyUsedDetailsCtrl($scope, OrderingService, $stateParams) {

    $scope.details = [];
    $scope.test1 = orderingService.test;


    $scope.init = function () {

        $scope.test = OrderingService.test;

        OrderingService.loadDetails($stateParams.fromDate)
       // orderingService.loadDetails('','','')
        .then(function (data) {
            console.log(data);
            $scope.details = data;
        });
    };

    $scope.init();



}]);

好的。所以我相信我已经将范围缩小到问题只是 service/factory。当我调用它时，它破坏了一切。

----------------编辑！好的，是的，服务很有帮助，但实际问题很愚蠢。我忘记将功能添加到我的 return 服务中了！！！！现在有人可以 post 回答而不是对剩余问题的评论吗？下一页的 $stateParams 不是未定义的。在控制台中显示对象（但不是可扩展对象，并且没有详细信息属于该对象）。 $stateParams 的 "properties" 变量未定义。你可以看到我原来的代码post（在这个编辑之上）。

Answer 1

答案是您必须将它包含在 url: 中，以便 $stateparams 知道它。
--我知道可能还有另一个使用参数的选项：在 url 之后并像那样传递它，但我无法让我的工作正常。这样做的好处是 url 很好！ -- 我必须创建一个 formatdate 函数来绕过的另一个问题是 angular 或 js 在我发送日期对象时不喜欢，所以我必须像你看到的那样解析它们。 ..

这是我更新后的代码：

 .state('orderingDetails', {
        // url: '/orderingDetails:fromDate/:toDate',
        url: '/purchasingDetails/{fromDate}/{toDate}',
        templateUrl: '/App/js/ordering/partials/OrderingDetails.html',
        controller: 'QtyUsedDetailsCtrl',
        resolve: {
            details: function (OrderingService, $stateParams) {        
                return OrderingService.loadDetails($stateParams.fromDate,$stateParams.toDate);

这是我的 $state.go 电话：

 $scope.openDetail = function (index) {
        var url = $state.href('orderingingDetails', { fromDate: $scope.formatDate($scope.filter.fromDate) , toDate: $scope.formatDate($scope.filter.toDate)} );            
        window.open(url, '_blank');    
    };

angularjs 如何在同一模块的 2 个单独页面上路由 2 个单独的控制器

angularjs how to route 2 separate controllers on 2 separate pages for same module

angularjs

angularjs-routing