Создание кнопки, которая показывает модальное в AngularJS с помощью UIBootstrap

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

Я также объявил uibModal в контроллере приложения

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

я получаю сообщение об ошибке в консоли, когда я нажимаю кнопку Modal Test Он говорит:

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

Может кто-нибудь поможет в этом вопросе? Благодаря

EDIT: Вот код для модального я пытаюсь получить появляться (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) {...} 

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.