Question

我有这个HTML代码（protocol-modal.html），我想将其作为指令添加到我的主HTML文件中：

<div class="modal-content">

    <form class="form-horizontal" role="form" name="questionForm">
    <div class="modal-header">
        <h3 class="modal-title">{{ tctrl.currentDataObject.title }}</h3>
    </div>

    <div class="modal-body">

        <div class="form-group">

            <div class="col-xs-8">
                <input type="text" class="form-control"
                    ng-model="tctrl.formData.name" id="name"
                    placeholder="{{ tctrl.currentDataObject.placeholder }}"/>

            </div>

        </div>

        <!-- This button calls the method that performs the POST request-->
        <button type="button" class="btn btn-success" ng-click="tctrl.processForm()">Add</button>

        <hr></hr>

        <!--TABLE STARTS HERE-->

        <table class="table table-striped">
            <thead>

              <tr>
                <th ng-repeat="c in tctrl.currentDataObject.tableColumns"> {{ c }} </th>
              </tr>

            </thead>

            <tbody>

               <!-- Loop through tctrl.protocolList-->
              <tr ng-repeat="(key, value) in tctrl.protocolList">

                <!--Access the actual values inside each of the objects in the array-->
                    <td ng-repeat="v in value" > {{ v }} </td>

                    <td>
                        <button type="button" class="btn btn-primary btn-sm"
                                data-dismiss="modal">Edit {{ tctrl.currentDataObject.tr }}</button>
                    </td>

                    <td>
                        <button type="button" class="btn btn-danger btn-sm"
                                data-dismiss="modal" ng-click="tctrl.remove(value)">Remove</button>
                    </td>

                  </tr>
                </tbody>

            </table>

        </div>

        <div class="modal-footer">

            <div class="pull-left">

                <button type="button" class="btn btn-danger"
                    data-dismiss="modal">Cancel</button>

            </div>

        </div>
    </form>

</div>

在我的控制器js文件中，我添加以下内容：

.directive('protocolModal', function(){
    return {
        restrict: 'E',
        templateUrl: 'protocol-modal.html'
    };
});

在我的主HTML文件中，我尝试使用它：

<div class="modal fade" id="addEntry" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->

                <protocol-modal></protocol-modal>

            </div>
        </div>

我在控制台中收到的错误如下所示：

enter image description here

非常感谢任何帮助。

修改

这是我的文件夹结构：

enter image description here

Answer 1

问题出在你的控制台上。您必须使用protocol-modal.html的错误网址，因为Angular在尝试加载时会遇到404.

Answer 2

您的模板路径错误

templateUrl：＆＃39; protocol-modal.html＆＃39;

因为无法找到该文件模板文件。

将其更改为正确的路径应该有所帮助。

更新：如果项目在您的服务器上是root用户，它应该如下所示：

/templates/protocol-modal.html

您也可以这样做：

http://localhost:8080/templates/protocol-modal.html

这取决于你主持项目的方式

在angular中使用指令来添加HTML

2 个答案: