如何在angularjs

Question

所以我想我可以制作另一个.html文件并使用模板或templateUrl引用它，但这似乎不起作用。必须有一种更好的方法，而不是将一堆html放入我的代码中间。如果我使用模板：'myHTML.html'它只打印文字并使用templateUrl它会抛出一个错误。有人知道如何使用本地.html文件并将其加载到模板中吗？

以下是我丑陋代码的视图：

var modalInstance = $modal.open({
  animation: $scope.animationsEnabled,
  template: '<div class="modal-header">\
                    <h2 class="modal-title">Reserved Vehicle: </h2>\
                </div>\
                <div class="modal-body">\
                    <ul class="carInfo">\
                        <li class="listFormat"><div class="divSet">Make:</div><div class="listInfoAlign">{{car.make}}</div></li>\
                            <div class="clearDiv"></div>\
                        <li class="listFormat"><div class="divSet">Model:</div><div class="listInfoAlign">{{car.model}}</div></li>\
                            <div class="clearDiv"></div>\
                        <li class="listFormat"><div class="divSet">Year:</div><div class="listInfoAlign">{{car.year}}</div></li>\
                            <div class="clearDiv"></div>\
                        <li class="listFormat"><div class="divSet">Color:</div><div class="listInfoAlign">{{car.color}}</div></li>\
                            <div class="clearDiv"></div>\
                        <li class="listFormat"><div class="divSet">Mileage:</div><div class="listInfoAlign">{{car.mileage | number}}</div></li>\
                            <div class="clearDiv"></div>\
                        <li class="listFormat"><div class="divSet">Doors:</div><div class="listInfoAlign">{{car.doors}}</div></li>\
                            <div class="clearDiv"></div>\
                        <li class="listFormat"><div class="divSet">Horsepower:</div><div class="listInfoAlign">{{car.horsepower}}</div></li>\
                            <div class="clearDiv"></div>\
                        <li class="listFormat"><div class="divSet">Price:</div><p class="listInfoAlign">{{car.price | number}}</p></li>\
                            <div class="clearDiv"></div>\
                    </ul>\
                <div class="formContainer">\
                    <form name="form" class="formStyles" ng-submit="submit()">\
                        <p class="para">\
                            <label class="labelCell" id="nameLabel" for="name">Name:</label>\
                            <input class="inputStyles" type="text" id="name" name="name" required>\
                        </p>\
                    <div class="clearDiv"></div>\
                        <p class="para">\
                            <label class="labelCell" id="phoneLabel" for="phone">Phone:</label>\
                            <input class="inputStyles" type="text" id="phone" name="phone" required/>\
                        </p>\
                    <div class="clearDiv"></div>\
                        <p class="para">\
                            <label class="labelCell" id="emailLabel" for="name">Email:</label>\
                            <input class="inputStyles" type="email" id="email" name="email" required/>\
                        </p>\
                    <div class="clearDiv"></div>\
                        <p class="para">\
                            <label class="labelCell" id="addressLabel" for="address">Address:</label>\
                            <input class="inputStyles" type="text" id="address" name="address"/>\
                        </p>\
                    <div class="clearDiv"></div>\
                        <p class="para textAreaPara">\
                            <label id="commentsLabel" for="comments">Notes:</label>\
                        <br>\
                        <textarea class="textInputStyles" placeholder="Please include any additional notes you might have here." rows="5" cols="50" id="comments"name="comments" maxlength="500"></textarea>\
                        </p>\
      <div>\
        <div class="submitButton">\
            <input id="submitID" type="submit" value="Submit"/>\
        </div>\
    </div>\
                    </form>\
                </div>\
            </div>',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
      car: function(){

      return $scope.car[index];
      }
  }
});

我希望这不是必须要做的，我确定不是，但我已经找到了答案，想想也许我只是不知道如何表达我的问题。我希望所有的html代码都在自己的文件中，然后使用模板或templateUrl来获取信息。谢谢

Answer 1

以下是一个很好的例子：http://plnkr.co/edit/lHTw0p381rcnnUKiJTpB?p=preview

直接来自文档：https://angular-ui.github.io/bootstrap/（只搜索模态）

var modalInstance = $modal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});

  

使用templateUrl会抛出错误

您应该使用本地服务器而不是file://协议（尝试猜测您的错误），或者您可以使用内嵌模板，再次来自上面的示例：

<script type="text/ng-template" id="myModalContent.html">
  HTML content here
</script>

Answer 2

您将能够使用模板网址，但必须使您的路径相对：

即

var modalInstance = $modal.open({
 animation: $scope.animationsEnabled,
 templateUrl: "./Scripts/app/views/test.html",
 controller: 'ModalInstanceCtrl',
 size: size,
 resolve: {
   car: function(){

    return $scope.car[index];
    }
  }  
});