Угловая UI $ модальная ошибка

Question

Я загрузил некоторые из угловых UI-директив, так как мне они не нужны. Я скачал последнюю версию файла для модального из http://angular-ui.github.io/bootstrap/ и используя этот код

App.controller('PagesController', ['$scope', '$modal', 'PageFactory', function ($scope, $modal, PageFactory) { 

    $scope.pages = []; 

    PageFactory.getPages().then(function (pages) { 
     $scope.pages = pages; 
    }, function (err) { 
     console.log(err.message); 
    }); 

    $scope.deletePage = function (page) { 
     var modalInstance = $modal.open({ 
      templateUrl: 'pages-delete-modal.html', 
      controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) { 
       $scope.ok = function() { 
        $modalInstance.close(); 
       }; 

       $scope.cancel = function() { 
        $modalInstance.dismiss('cancel'); 
       }; 
      }] 
     }); 

     modalInstance.result.then(function() { 
      // ok selected 

     }, function() { 

     }); 
    }; 

}]); 

Здесь шаблон

<script type="text/ng-template" id="pages-delete-modal.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Delete Confirmation</h3> 
    </div> 
    <div class="modal-body"> 
     Are you sure you want to delete this page? 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-danger" ng-click="ok()">Delete</button> 
     <button class="btn btn-default" ng-click="cancel()">Cancel</button> 
    </div> 
</script> 

Теперь я, кажется, получают ошибку говоря

http://errors.angularjs.org/1.2.23/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal 

У меня уже есть «ui.bootstrap» вводится в мой файл app.js здесь, как вы можете видеть

var App = angular.module('MyApp', ['ui.router', 'ui.bootstrap']); 

Если я использую эту ссылку, вместо использования загруженного модального файла, она работает?

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>  

Я также загружал директиву перехода, как я считаю, что директива модальных зависит от этого, но я не могу видеть, что я ничего другого не хватает.

Я использую файлы tpl.min.js как для перехода, так и для модального.

Любая помощь очень ценится

Answer 1

Вы должны попытаться изменить контроллер modalInstance на строку с именем фактического контроллера в вашем проекте.

$scope.deletePage = function (page) { 
    var modalInstance = $modal.open({ 
     templateUrl: 'pages-delete-modal.html', 
     controller: 'otherCtrl' 
    }); 

    modalInstance.result.then(function() { 
     // ok selected 

    }, function() { 

    }); 
}; 

, а затем создать контроллер сам

App.controller('otherCtrl',['$scope','$modalInstance', function($scope,$modalInstance){ 

    $scope.ok = function() { 
     $modalInstance.close(); 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}]);