面临错误-can'我想不通

facing error - can't figure it out

本文关键字：想不通 错误 -can      更新时间：2023-09-26

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>

每当我尝试在chrome中运行我的应用程序时，它都会抛出以下错误。

angular.js:7889 XMLHttpRequest无法加载file:///C:/Users/user/Desktop/Angular_modal_popup/modalContent.html.跨源请求仅支持以下协议方案：http，数据，铬，铬扩展，https，铬扩展资源

为什么会发生。？如何解决。？

我只是通过plunker下载一些例子来学习，但我再也无法运行它了。

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

上面的链接是我试图在本地机器中学习和执行的内容。这个例子在plunker网站上运行得很好，没有任何问题，但每当我在机器上下载并运行它时都会出错。

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

有人能一步一步地引导我吗？

"只有HTTP才支持跨源请求"加载本地文件时出错他提到浏览器无法显式加载文件的部分：//而是使用Web服务器加载

相关文章：