在AngularJS中加载模板HTML文件时无法加载错误

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中加载模板HTML文件时无法加载错误

问题描述

1 个解决方案

解决方案1
0 2018-02-20 17:40:43

在AngularJS中加载模板HTML文件时无法加载错误

问题描述

1 个解决方案

解决方案1 0 2018-02-20 17:40:43

解决方案1
0 2018-02-20 17:40:43