Question

我知道这个问题之前已被问过很多次，我仔细阅读了答案，尝试了提供的解决方案，但我仍然得到错误，我不知道为什么。我将我的应用程序剥离到一个简单的问候世界，试图弄清楚它为什么会发生。

            <!--index.html -->
                <!DOCTYPE html>
            <html lang="en" ng-app="app">
            <head> 
                    <script
                    src="https://code.jquery.com/jquery-3.3.1.min.js"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                    crossorigin="anonymous"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
            <script type="text/javascript" 
            src="./controller/MainController.ctrl.js"></script>

            </head>
            <body >
                <div ng-controller="HelloController">
                    <test-dir/>
                </div>
            </body>
            </html>

             //controller/MainController.ctrl.js
             var app = angular.module('app',[]);
             app.controller("HelloController", function($scope) {
             });

              app.directive('testDir', function (){
             return {
                restrict:'E',
                replace:true,
                template:`template/helloWorld.template.html`
             };
          });

   <!--template/helloWorld.template.html -->
   <div>
       <h1>hello, is it me you're looking for</h1>
   </div>

Answer 1

如果您提供模板文件的链接，则应使用templateUrl而不是template。

如果你想使用template，你必须写

"template":"<div>...</div>"

Answer 2

从模板更改为templateUrl

`template:`template/helloWorld.template.html`

到

templateUrl :模板/ helloWorld.template.html

错误：[$ compile：tplrt]指令的模板必须只有一个根元素

2 个答案: