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

时间:2016-03-04 16:05:49

标签: angularjs angularjs-routing

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

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();



}]);

确定。所以我相信我已经把它缩小到问题只是服务/工厂。当我打电话给它时,它打破了一切。

--------------编辑! 好的,是的服务很有帮助,但实际问题非常愚蠢。我忘了将功能添加到我返回的服务中!!!!现在有人可以发布答案而不是对剩下的问题发表评论吗?下一页的$ stateParams未定义。在控制台中它表示对象(但不是可扩展对象,并且没有细节属于对象)。并且$ stateParams的“属性”变量是未定义的。您可以在我的原始帖子中看到该代码(在此编辑之上)。

1 个答案:

答案 0 :(得分:0)

回答是你必须将它包含在网址中:为了让$ stateparams了解它。
- 我知道可能还有另一种方法可以使用params:在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');    
    };