使用 UIBootstrap 在 AngularJS 中创建一个显示模式的按钮答案

【问题标题】：Creating a button that shows a modal in AngularJS using UIBootstrap使用 UIBootstrap 在 AngularJS 中创建一个显示模式的按钮
【发布时间】：2017-01-07 04:57:21
【问题描述】：

在我的 html 页面 (rollup.html) 上，我有一个按钮..

<li style="float: right;">
<button id="myBtn" ng-click="printDivModal('rollup-tab')">Modal Test</button>
</li>

我希望这个按钮显示一个模态。在 Rollup.js 我已经声明了范围。

$scope.printDivModal = function(divName) {
        console.log('opening pop up');
        var modalInstance = $uibModal.open({
            animation: $ctrl.animationsEnabled,
            templateUrl: 'app/views/modals/stackedModal.html',
            size: 'sm',
            controller: function($scope) {
                $scope.name = 'top';  
              }
        });
    }

我还在应用控制器中声明了 uibModal

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {

单击“模态测试”按钮时，控制台中出现错误它说：

ReferenceError: '$modal' is undefined
at $scope.printDivModal (/rollup.js)

谁能帮助解决这个问题？谢谢

编辑：这是我试图出现的模态代码（stackedModal.html）

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

【问题讨论】：

您没有在控制器定义中提供控制器的所有依赖项
@epitka 我在控制器定义中没有提供什么？我以为我是通过声明 uibModal 来做到的。
“printDivModal”在哪里定义？
@alphapilgrim 我没有在 rollup.html 中定义它并在 rollup.js 中实现。很抱歉我是新手。

标签： javascript html angularjs angular-ui-bootstrap angularjs-ng-click

【解决方案1】：

试试这个

app.controller('Rollup', rollUpCtrl);

rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal','headersvc','locFiltersvc']

function rollUpCtrl($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {...}

【讨论】：

【解决方案2】：

你试试这个

app.controller('Rollup',['$scope','$rootScope','$http','$uibModal','headersvc','locFiltersvc', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc){


}]);

【讨论】：

【解决方案3】：

由于几行代码，模态似乎没有出现：

$scope.printDivModal = function(divName) {
        console.log('opening pop up');
        var modalInstance = $uibModal.open({
            //animation: $ctrl.animationsEnabled,
            templateUrl: 'app/views/modals/stackedModal.html',
            size: 'sm',
                /*controller: function($scope) {
                    $scope.name = 'top';  
                  }
                */
            });
        }

我还决定在它自己的 js 文件中为 modal 提供自己的控制器，而不是在主 js 文件中定义它。

【讨论】：