angularjs - 面临错误 - 无法弄明白

时间:2016-08-04 07:05:14

标签: javascript angularjs modal-dialog angular-ui-bootstrap ngroute

TRUNCATE mytable RESTART IDENTITY;
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>

每当我尝试在Chrome中运行我的应用时,都会抛出以下错误。

  

angular.js:7889 XMLHttpRequest无法加载   文件:/// C:/Users/user/Desktop/Angular_modal_popup/modalContent.html。   交叉源请求仅支持协议方案:http,   数据,chrome,chrome-extension,https,chrome-extension-resource

为什么会发生这种情况。如何解决它。?

我只是通过plunker下载一些例子来学习,但我不能再运行它了。

http://plnkr.co/edit/lHTw0p381rcnnUKiJTpB?p=preview

以上链接是我尝试在本地计算机上学习和执行的内容。 该示例运行正常,在plunker网站中没有任何问题,但每当我下载并在我的机器上运行时都会出错。

从StackOverflow得到了一些答案,但我无法理解。

请允许任何人一步一步指导我吗?

1 个答案:

答案 0 :(得分:0)

"Cross origin requests are only supported for HTTP." error when loading a local file 他提到浏览器的部分无法显式加载文件:// 而是使用网络服务器加载