2

我为 ui-router 定义了以下状态：

    var questions = {
        name: 'questions',
        url: '/questions',
        views: {
            'menu': {
                templateUrl: '/Content/app/questions/partials/menu.html',
            },
            'content': {
                templateUrl: '/Content/app/common/partials/empty.html',
            },
            'status@': {
                templateUrl: '/Content/app/questions/partials/status.html',
            }
        }
    }

    var questionsContent = {
        name: 'questions.content',
        parent: 'questions',
        url: '/:content',
        views: {
            'content@': {
                templateUrl: function (stateParams) {
                    var isNumber = !isNaN(parseFloat(stateParams.content));
                    return isNumber ? '/Content/app/questions/partials/detail.html' :
                                      '/Content/app/questions/partials/content.html'
                },
            },

        }
    }

我想为此定义一个控制器。

我见过这样的例子，它们对每个视图都这样做：

    'content@': {
                templateUrl: '/Content/app/home/partials/content.html',
                controller: 'HomeContentController',
            }

我是否有可能拥有一个用于所有视图的控制器，并且我需要每次为每个视图指定控制器。

此外，当 /:content 值发生变化时，我如何检测控制器中的状态变化然后做些什么？

4

2 回答 2

3

我不知道状态更改的内置方式watch，但是您可以使用LocationService包装$state.transitionTo并从那里广播某些内容的方法：

function LocationService($http, $state) {

    this.transitionTo = function ($scope, state) {
        $state.transitionTo(state);
        $scope.$root.$broadcast('stateTransition', state);
    };
}

myModule.service('LocationService', ['$http', '$state', LocationService]);

然后，而不是在您的视图中使用锚点，href="#root.somestate"您将使用ng-click="goto('root.somestate')"和

$scope.$watch('stateTransition', function(state) {
    console.log('transitioning to ' + state);
});

$scope.goto = function(state) {
    locationService.transitionTo($scope, state);
}

在您的控制器中。

于 2013-09-17T11:50:46.923 回答
1 
I think you should try following code.
$stateProvider
  .state('report',{
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      },
      'tabledata': {`enter code here`
        templateUrl: 'report-table.html',`enter code here`
        controller: function($scope){ ... controller stuff just for tabledata view ... }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope){ ... controller stuff just for graph view ... }
      },
    }
  })
于 2014-03-05T10:17:12.440 回答