angularjs - facing error - can't figure it out
Question
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']); app.controller('Nav', function($scope) { }); app.controller('ModalCtrl', function($scope, $modal) { $scope.name = 'theNameHasBeenPassed'; $scope.showModal = function() { $scope.opts = { backdrop: true, backdropClick: true, dialogFade: false, keyboard: true, templateUrl : 'modalContent.html', controller : ModalInstanceCtrl, resolve: {} // empty storage }; $scope.opts.resolve.item = function() { return angular.copy({name:$scope.name}); // pass name to Dialog } var modalInstance = $modal.open($scope.opts); modalInstance.result.then(function(){ //on ok button press },function(){ //on cancel button press console.log("Modal Closed"); }); }; }) var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) { $scope.item = item; $scope.ok = function () { $modalInstance.close(); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }
<!doctype html> <html ng-app="plunker"> <head> <script src="angular.js"></script> <script src="angular-route.js"></script> <script src="ui-bootstrap-tpls-0.7.0.js"></script> <script src="example.js"></script> <link href="bootstrap-combined.min.css" rel="stylesheet"> <style> .left-nav,.right-nav{ float:left; } .right-nav{ margin-left:20px; } a{ cursor:pointer; } </style> </head> <body> <div ng-controller="ModalCtrl"> <div>Some Content</div> <button ng-click="showModal()">Click Me</button> </div> </body> </html>
<div class="modal-header"> <h1>This is the title {{item.name}}</h1> </div>' <div ng-controller="Nav" class="modal-body"> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> </div>
whenever i tried to run my app in chrome it throws following error.
angular.js:7889 XMLHttpRequest cannot load file:///C:/Users/user/Desktop/Angular_modal_popup/modalContent.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource
why its happen.? how to resolve it.?
I just download some example through plunker to learn but i can't run it anymore.
http://plnkr.co/edit/lHTw0p381rcnnUKiJTpB?p=preview
Above link was what I tried to learn and execute in my local machine. the example run properly good without no issues in plunker site but through error whenever i download and run it in my machine.
Got some answers from StackOverflow but I can't understand.
Kindly can anyone guide me step by step?
1 answers
solution1
0 2016-08-04 07:14:15
"Cross origin requests are only supported for HTTP." error when loading a local file The part where he mentions the browser can't explicitly load a file:// and instead using a webserver to load
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.