使用templateUrl时未找到路径 - angular指令

Question

我将我的指令附加到我的控制器（custom.js）上，如下所示：

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

然后我在我的index.html中使用它，如此：

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

        <!-- Modal content-->
        <protocol-modal></protocol-modal>

    </div>
</div>

我的文件夹结构如下所示：

我的java控制器看起来像这样

@Controller
@RequestMapping("/index")
public class ProtocolController {

    /**
     * Return a form for creating a new Protocol
     * 
     * @param model
     * @return
     */
    @RequestMapping(value = "", method = RequestMethod.GET)
    public String getCreateForm(Model model) {
        return "index";
    }
}

我最终得到的错误，看起来像这样

非常感谢任何帮助。

Answer 1

任何有兴趣的人的答案：

诀窍是将protocol-modal.html移至static folder

一旦完成，我就可以这样称呼它

templateUrl: '/protocol-modal.html'

Answer 2

您应该更改templateUrl

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