Javascript 使用角度用户界面路由器的基于状态参数的负载控制器

我试图加载一个基于stateparam的控制器，以使其可重用

.state("dashboard.item.detail", {
    url: "/detailId/:detailId/detailName/:detailName",
    views: {
       'main@': {
            templateUrl: function ($stateParams){
                //move this to a util function later
                var tempName = unescape($stateParams.detailName);
                tempName = tempName.replace(/\s/g, "-");
                return '../partials/slides/' + tempName + '.html';
            },
            resolve: {
                DetailData: ['DetailService', function(DetailService){
                    return DetailService.getDetails();
                }]
            },
            controller: function ($stateParams) {
                console.log( $stateParams.detailName + 'Ctrl');
                return $stateParams.detailName + 'Ctrl';
            }
        }
      }
})

控制器

    .controller('NemtCtrl', ['$scope', '$rootScope', 'DetailData', function ($scope, $rootScope, detailData) {
    console.log(detailData);
}]);

如果我删除该功能并仅使用，控制器将工作（控制台将记录详细数据）

但如果我这样做了就不起作用了：

controller: function ($stateParams) {
    return 'NemtCtrl';
}

---

我做错了什么？有更好的方法吗？

这里发生的是，当你写这篇文章时：

controller: 'NemtCtrl'

告诉angular获取名为“NemtCtrl”的控制器。但另一方面，当你写下：

controller: 
   function ($stateParams) {
        return 'NemtCtrl';
   }

您正在为该状态定义控制器

更新

根据ui路由器文档，方法如下：

$stateProvider.state('contacts', {
  template: ...,
  controllerProvider: function($stateParams) {
      var ctrlName = $stateParams.type + "Controller";
      return ctrlName;
  }
})

你可以阅读更多关于它的内容

更新2

对于您的情况，它将类似于：

.state("dashboard.item.detail", {
  url: "/detailId/:detailId/detailName/:detailName",
  views: {

    'main@': {
      templateUrl:
        function ($stateParams){
          //move this to a util function later
          var tempName = unescape($stateParams.detailName);
          tempName = tempName.replace(/\s/g, "-");

          return '../partials/slides/' + tempName + '.html';
        },
      resolve: {
        DetailData: ['DetailService',
          function(DetailService){
            return DetailService.getDetails();
          }]
      },
      controllerProvider: //Change to controllerProvider instead of controller
        function ($stateParams) {
          //console.log( $stateParams.detailName + 'Ctrl');
          return $stateParams.detailName + 'Ctrl';
        }
    }

  }

})

.state("dashboard.item.detail", {
  url: "/detailId/:detailId/detailName/:detailName",
  views: {

    'main@': {
      templateUrl:
        function ($stateParams){
          //move this to a util function later
          var tempName = unescape($stateParams.detailName);
          tempName = tempName.replace(/\s/g, "-");

          return '../partials/slides/' + tempName + '.html';
        },
      resolve: {
        DetailData: ['DetailService',
          function(DetailService){
            return DetailService.getDetails();
          }]
      },
      controllerProvider: //Change to controllerProvider instead of controller
        function ($stateParams) {
          //console.log( $stateParams.detailName + 'Ctrl');
          return $stateParams.detailName + 'Ctrl';
        }
    }

  }

})