Question

我正在尝试使用AngularJS中的组件创建一个模态但是它会抛出错误“无法加载HTML文件”。

我该如何做到这一点？

它还显示以下错误：angular.js：14642错误：[$ compile：tpload]

那也是两次。

任何想法都可以做到这一点，如果你能解释它出了什么问题。那将是非常好的。

这是我的档案。

的index.html

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>Bootstrap Modal using Component</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
    <script src="component.js"></script>
  </head>
  <body>
    <div>
      <button type="button" class ="btn btn-danger" data-toggle="modal" data-target="#logBTModal">What's New</button>
      <!-- Modal Starts -->
      <log-modal></log-modal>
    </div>
  </body>
</html>

app.js

(function(){
  'use strict';
  var app = angular.module('myApp', []);
})();

Component.js

var app = angular.module('myApp');
app.component("logModal", {
  templateUrl: "logModalTemp.html",
  bindings: { name: '@'},
  controller: function(){
    this.title = "This is the first Modal that I have created!!"
  }
});

LogModalTemp.html

<script type="text/ng-template" id="logModalTemp.html">
<div id="logBTModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content -->
    <div class="modal-content">

      <!-- Modal header -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">{{$ctrl.title}}</h4>
      </div>

      <!-- Modal body -->
      <div class="modal-body">

      </div>

    </div>
  </div>
</div>
</script>

Answer 1

有一个小错误。

检查templateUrl: "logModalTemp.html"它应该是templateUrl: "LogModalTemp.html"

仅供参考https://plnkr.co/edit/0fAVzmQKiPX8junM3vxN?p=preview

在AngularJS

1 个答案: