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

我还在app控制器中声明了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

试试这个

HashMap

Answer 2

你试试这个

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


}]);

Answer 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文件中为模态提供自己的控制器，而不是在主js文件中定义它。

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

3 个答案: