如何在自己的文件中定义模态控制器? [英] 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', 控制器: 'DashboardController'$routeProvider.when '/dataset/:panel_id', templateUrl: '/templates/dataset/dataset.html', 控制器: 'DatasetController'$routeProvider.when '/batches/:panel_id', templateUrl: '/templates/design/design.html', 控制器: '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'控制器:ConfigureModalCtrlwindowClass: '配置对话框'解决:底漆3:->$scope.primer3)modalInstance.result.then ((primer3) ->$scope.primer3 = 底漆3返回), ->返回

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

angular.module('assaypipelineApp').controller "ConfigureModalCtrl", ($scope, $modalInstance,primer3) ->$scope.primer3 =primer3['data']$scope.ok = ->$modalInstance.close $scope.primer3返回$scope.cancel = ->$modalInstance.dismiss "取消"serverErrorHandler = ->alert("服务器出错，请重新加载页面并重试.")

错误信息

错误:未知提供者: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屋！