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.
每当我试图在Chrome中运行我的应用程序时,它会抛出以下错误。
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
angular.js:7889 XMLHttpRequest无法加载file:/// C:/Users/user/Desktop/Angular_modal_popup/modalContent.html。交叉源请求仅支持协议方案:http,数据,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.
我只是通过plunker下载一些例子来学习,但我不能再运行了。
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.
以上链接是我尝试在本地机器中学习和执行的内容。该示例运行正常良好,没有问题在plunker网站,但每当我下载并在我的机器上运行时出错。
Got some answers from * but I can't understand.
从*得到了一些答案,但我无法理解。
Kindly can anyone guide me step by step?
请允许任何人一步一步指导我吗?
1 个解决方案
#1
0
"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
“只有HTTP支持交叉原始请求。”加载本地文件时出错他提到浏览器的部分无法显式加载文件://而是使用网络服务器加载
#1
0
"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
“只有HTTP支持交叉原始请求。”加载本地文件时出错他提到浏览器的部分无法显式加载文件://而是使用网络服务器加载