如何在自己的文件中定义模态控制器? [英] How to define modal controllers in their own file?

问题描述

我的Angular应用程序有许多模态，我有AngularUI提供模态指令.

http://angular-ui.github.io/bootstrap/

到目前为止，我有几个主控制器，它们都在app.js文件中作为路由.

$routeProvider.when '/dashboard',         templateUrl: '/templates/dashboard/dashboard.html', controller: 'DashboardController'
$routeProvider.when '/dataset/:panel_id', templateUrl: '/templates/dataset/dataset.html',   controller: 'DatasetController'
$routeProvider.when '/batches/:panel_id', templateUrl: '/templates/design/design.html',     controller: 'PanelController'  

这很好.

然后，我创建了一个调用模态的函数，模态具有 ConfigureModalCtrl 的实例控制器.我最初将其放在调用控制器文件的底部，并且工作正常.

$scope.invokeConfigureModal = (assay_id) ->
   $scope.assay_id = assay_id
   $scope.primer3 = $scope.getPrimer(assay_id)
   modalInstance = $modal.open(
     templateUrl: '/templates/configure_modal/configure_modal.html'
     controller: ConfigureModalCtrl
     windowClass: 'configure-dialog'
     resolve:
           primer3: ->
             $scope.primer3
   )
   modalInstance.result.then ((primer3) ->
      $scope.primer3 = primer3
      return
     ), ->
      return   

现在，我已经将模式实例控制器移到了它自己的文件中，但是调用函数找不到它.

angular.module('assaypipelineApp').controller "ConfigureModalCtrl", ($scope,  $modalInstance, primer3) ->
  $scope.primer3 = primer3['data']
  $scope.ok = ->  
    $modalInstance.close $scope.primer3
    return
  $scope.cancel = ->
    $modalInstance.dismiss "cancel"
  serverErrorHandler = ->
    alert("There was a server error, please reload the page and try again.")

错误消息

Error: Unknown provider: ConfigureModalCtrlProvider <- ConfigureModalCtrl

类似的问题，但不能解决我的问题. 如何创建单独的AngularJS控制器文件?

那么我该如何解决此问题，为什么其他控制器(非模态实例)不会发生这种情况?是因为它们是在路线中命名的吗?

也欢迎任何有关编码样式的建议...感谢您阅读本文.

解决方案

尝试将控制器作为字符串放置-我遇到了类似的问题.

controller: 'ConfigureModalCtrl'

My Angular application has a number of modals, and I have AngularUI to provide the modal directive.

http://angular-ui.github.io/bootstrap/

So far I have several main controllers, and these are all in the app.js file as routes.

$routeProvider.when '/dashboard',         templateUrl: '/templates/dashboard/dashboard.html', controller: 'DashboardController'
$routeProvider.when '/dataset/:panel_id', templateUrl: '/templates/dataset/dataset.html',   controller: 'DatasetController'
$routeProvider.when '/batches/:panel_id', templateUrl: '/templates/design/design.html',     controller: 'PanelController'  

This works fine.

Then I created a function which calls a modal, and the modal has an instance controller of ConfigureModalCtrl. I initially had this at the bottom of the calling controller file, and it worked OK.

$scope.invokeConfigureModal = (assay_id) ->
   $scope.assay_id = assay_id
   $scope.primer3 = $scope.getPrimer(assay_id)
   modalInstance = $modal.open(
     templateUrl: '/templates/configure_modal/configure_modal.html'
     controller: ConfigureModalCtrl
     windowClass: 'configure-dialog'
     resolve:
           primer3: ->
             $scope.primer3
   )
   modalInstance.result.then ((primer3) ->
      $scope.primer3 = primer3
      return
     ), ->
      return   

Now I have moved the modal instance controller into it's own file, but the calling function cannot find it.

angular.module('assaypipelineApp').controller "ConfigureModalCtrl", ($scope,  $modalInstance, primer3) ->
  $scope.primer3 = primer3['data']
  $scope.ok = ->  
    $modalInstance.close $scope.primer3
    return
  $scope.cancel = ->
    $modalInstance.dismiss "cancel"
  serverErrorHandler = ->
    alert("There was a server error, please reload the page and try again.")

Error message

Error: Unknown provider: ConfigureModalCtrlProvider <- ConfigureModalCtrl

Similar question but does not resolve my problem. How to create separate AngularJS controller files?

So how can I resolve this problem, and why does this not occur for the other (non-modal instance) controllers? Is it because they are named in the routes?

Any recommendations on coding style are welcome also ... thanks for reading this.

解决方案

Try putting the controller as a string -- I had a similar issue.

controller: 'ConfigureModalCtrl'

这篇关于如何在自己的文件中定义模态控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！