angularjs – 模板必须具有一个根元素,其中带有自定义指令replac

发布时间：2020-12-17 07:39:07 所属栏目：安全来源：网络整理

导读：我有一个自定义指令的问题与replace：true, http://jsbin.com/OtARocO/2/edit 据我所知,我只有一个根元素,我的,这里发生了什么？ Error: Template must have exactly one root element. was: tbody trtd{{ item.name }}/td/tr trtdrow2/td/tr/tbody 使用Java

我有一个自定义指令的问题与replace：true,

http://jsbin.com/OtARocO/2/edit

据我所知,我只有一个根元素,我的,这里发生了什么？

Error: Template must have exactly one root element. was: 
<tbody>
  <tr><td>{{ item.name }}</td></tr>
  <tr><td>row2</td></tr>
</tbody>

使用Javascript：

var app = angular.module("AngularApp",[])
  .directive('custom',[function () {
    return {
      restrict: 'E',replace: true,templateUrl: 'lineItem.html',link: function(scope,element,attrs) {

      }
    };
  }])
.controller('MyCtrl',['$scope',function($scope) {
  $scope.items = [
    { 
      name: 'foo'
    },{
      name: 'bar'
    },{
      name: 'baz'
    }
  ];
}]);

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta name="description" content="Angular Avatar Example" />  

  <script src="//crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>


<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body data-ng-app="AngularApp">
  <script type="text/ng-template" id="lineItem.html">
    <tbody>
      <tr><td>{{ item.name }}</td></tr>
      <tr><td>row2</td></tr>
    </tbody>
  </script>
  <div data-ng-controller="MyCtrl">
    <table>
      <custom data-ng-repeat="item in items"></custom>
    </table>
  </div>
</body>
</html>

似乎是 a known bug的AngularJs.

您可以做的是将限制更改为属性而不是元素,从模板中删除tbody,并在项目“>”中使用< tbody custom ng-repeat =“项.在你的html代码. 基本上：你的模板变成：

<tr><td>{{ item.name }}</td></tr>
<tr><td>row2</td></tr>

您的指令：

return {
  restrict: 'A',attrs) {

  }
};

和你的HTML：

<div data-ng-controller="MyCtrl">
  <table>
    <tbody custom data-ng-repeat="item in items"></tbody>
  </table>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!