如何在angularjs ui中使用模態？

我正在嘗試使用Angular UI模式，但我不斷收到未知的提供程序錯誤消息：「Error: [$injector:unpr]」。如何在angularjs ui中使用模態？

我使用自定義生成來最小化文件的整體大小。創建它時，我在應用程序中注入了ui依賴項。構建文件被添加到index.html頁面。

//This is the app.js file 
 
(function() { 
 
    angular.module('locatorApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']); 
 

 
    function config($routeProvider, $locationProvider) { 
 

 
    $routeProvider 
 
     .when('/', { 
 
     templateUrl: 'home/home.view.html', 
 
     controller: 'homeCtrl', 
 
     controllerAs: 'vm' 
 
     }) 
 
     .when('/about', { 
 
     templateUrl: '/common/views/genericText.view.html', 
 
     controller: 'aboutCtrl', 
 
     controllerAs: 'vm' 
 
     }) 
 
     .when('/location/:locationid', { 
 
     templateUrl: '/locationDetail/locationDetail.view.html', 
 
     controller: 'locationDetailCtrl', 
 
     controllerAs: 'vm' 
 
     }) 
 
     .otherwise({ 
 
     redirectTo: '/' 
 
     }); 
 

 
    $locationProvider.html5Mode(true); 
 
    } 
 

 

 
    angular 
 
    .module('locatorApp') 
 
    .config(['$routeProvider', '$locationProvider', config]); 
 

 
})();

//This is the controller file 
 

 
(function() { 
 
    angular 
 
    .module('locatorApp') 
 
    .controller('locationDetailCtrl', locationDetailCtrl); 
 

 
    /*Inject $routeParams service into controller to protect from minification*/ 
 
    locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'locatorData']; 
 

 
    function locationDetailCtrl($routeParams, $uibModal, locatorData) { 
 
    var vm = this; 
 
    vm.locationid = $routeParams.locationid; 
 
    locatorData.locationById(vm.locationid) 
 
     .success(function(data) { 
 
     vm.data = { 
 
      location: data 
 
     }; 
 
     vm.pageHeader = { 
 
      title: vm.data.location.name 
 
     }; 
 
     }) 
 
     .error(function(e) { 
 
     console.log(e); 
 
     }); 
 

 
    vm.popupReviewForm = function() { 
 
     alert("Let's add a review"); 
 
    }; 
 

 
    } 
 

 

 
})();

<!-- This is the index.html file--> 
 
<!DOCTYPE html> 
 
<html ng-app="locatorApp"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>LocatoR</title> 
 
    <link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css"> 
 
    <link rel="stylesheet" href="/stylesheets/style.css"> 
 
</head> 
 

 
<body ng-view> 
 
    <script src="/angular/angular.min.js"></script> 
 
    <script src="/lib/angular-route.min.js"></script> 
 
    <script src="/lib/angular-sanitize.min.js"></script> 
 
    <script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script> 
 
    <script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script> 
 
    <script src="/angular/locator.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/ 
 
jquery.min.js"></script> 
 
    <script src="/bootstrap/js/bootstrap.min.js"></script> 
 
    <script src="/javascripts/validation.js"></script> 
 
</body> 
 

 
</html>

//This is the locatorData service 
 
(function() { 
 
    /*Data service for pulling data from the API*/ 
 
    locatorData.$inject = ['$http']; 
 

 
    function locatorData($http) { 
 
    var locationByCoords = function(lat, lng) { 
 
     return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxdist=20'); 
 
    }; 
 

 

 
    var locationById = function(locationid) { 
 
     return $http.get('/api/locations/' + locationid); 
 
    }; 
 
    return { 
 
     locationByCoords: locationByCoords, 
 
     locationById: locationById 
 
    }; 
 
    }; 
 

 

 
    angular 
 
    .module('locatorApp') 
 
    .service('locatorData', locatorData); 
 

 
})();

來源

2017-06-01 M.Z.

什麼是locatorData的依賴關係？ – anoop

這是一個我製作的http數據服務： –

你的ng-view覆蓋了所有腳本標籤 –

你應該在0使用在<body>之內，所以在路由模板被替換之後腳本標記將存在。那麼重新組織你添加的腳本標籤的順序會更好。起初無棱角的腳本文件，那麼棱角分明，那麼你的源代碼

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="/javascripts/validation.js"></script> 
<script src="/bootstrap/js/bootstrap.min.js"></script> 
<script src="/angular/angular.min.js"></script> 
<script src="/angular/locator.min.js"></script> 
<script src="/lib/angular-route.min.js"></script> 
<script src="/lib/angular-sanitize.min.js"></script> 
<script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script> 
<script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>

然後用$uibModal服務，您已經注入：

vm.popupReviewForm = function() { 
    $uibModal.open({ 
    template: '...html', 
    //...config from docs 
    }).then(function(){console.log('closed successfully');}) 
    .catch(function(){console.log('dismissed modal');}); 
};

來源

2017-06-01 14:03:38

謝謝Gudz提供你的建議，但我已經嘗試過了，但它不起作用。 –

移動你的腳本標籤要麼低於head標籤。

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>LocatoR</title>  
    <link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css"> 
    <link rel="stylesheet" href="/stylesheets/style.css"> 
    // Scripts 
</head>

，或者在外面ng-view：

<body> 
<div ng-view></div> 
// scripts here 
</body>

來源

2017-06-01 14:10:00 anoop

謝謝你的建議anoop。我試過了，但沒有奏效。 –

@Maz：這樣做後你得到了什麼確切的錯誤？ – anoop

此問題開始時出現相同的錯誤消息。錯誤消息：angular.js：10160錯誤：[$ injector：unpr] http://errors.angularjs.org/1.2.32/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal –

好吧，我終於想通了。問題在於使用Angular JS和Angular UI的不兼容版本。

來源

2017-06-11 10:35:43

如何在angularjs ui中使用模態？

回答

相關問題