angular 指令中的模板 URL 文件声明

Question

我有以下 html 文件：-

 <!DOCTYPE html>
 <html lang="en">
  <head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="first.js"></script>
<link rel="stylesheet" href="list.css">
</head>
 <body class="body" ng-app="myApp" ng-controller="FirstController as ctrl">
<div>
    <input type="text" ng-model="inputText">
</div>
<first-tag></first-tag>

 </body>
</html>

在此我有一个名为 first-tag 的元素指令。

以下是我的js文件：-

var app=angular.module('myApp',[]);
app.controller('FirstController',function($http){
var self=this;
$http.get("data.json").success(function(response){

    self.data=response.records;
})

})


app.directive('firstTag',function(){
return{
    restrict:'E',
    replace:true,
    templateUrl:'template.html',
    controller:'FirstController',
    controllerAs:'ctrl'

}
})

在我的指令中，我已将 template.html 声明为模板 URL。谁能告诉我为什么以下内容在代码中无法正常工作？

 <table>
 <div  class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
      <tr>
       <td><p>Name:{{message.modelName}}</p></td>
       <td><p>Brand:{{message.modelBrand }}</p></td>
        <td><img src="{{message.imageUrl}}" width="auto" height="auto"></td>
      </tr>
 </div>
 </table>

以下似乎工作正常：-

  <div  class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
      <p>Name:{{message.modelName}}</p>
       <p>Brand:{{message.modelBrand }}</p>
        <img src="{{message.imageUrl}}" width="auto" height="auto">
 </div>

我想在table中打印以上内容。

Answer 1

我觉得应该是：

<table>
  <tr class="myClass" ng-repeat="message in ctrl.data | filter: inputText">
     <td><p>Name:{{message.modelName}}</p></td>
     <td><p>Brand:{{message.modelBrand }}</p></td>
     <td><img ng-src="{{message.imageUrl}}" width="auto" height="auto"></td>
  </tr>
</table>

angular 指令中的模板 URL 文件声明

Template URL file declaration in angular directives

angularjs

angular-directive