javascript - 使用 Bootstrap 创建一个在 AngularJS 中显示模式的按钮

Question

在我的 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';  
              }
        });
    }

我还在应用程序 Controller 中声明了 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>

Answer 1

试试这个

app.controller('Rollup', rollUpCtrl);

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

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