Question

我想在angular JS的帮助下用定义的文本替换一些文本。我的HTML是

<!DOCTYPE html>
<html>
<head>
    <title>Directive</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body ng-app="myApp">
    <div hello-world>sometext</div>
</body>
</html>

和JS是

var app = angular.module('myApp', []);

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<input type="text" ng-model="headline"/><br/>{{headline}}'
  };
});

我的浏览器说，

Error: [$compile:tplrt] Template for directive 'helloWorld' must have exactly one root element....

如何解决这个问题。谢谢。

Answer 1

return {
      restrict: 'AE',
      replace: 'true',
      template: '<div><input type="text" ng-model="headline"/><br/>{{headline}}</div>'
  };

应该这样做。重要的部分是包装模板字符串的div标记。

正如Sajeetharan正确评论的那样，模板必须只有一个包装器才能取代你的指令。

否则，替换操作将导致单个元素（指令）被多个元素或节点替换，这在实践中不受支持且通常不需要。

但它不一定是div;所以当你有'replace':true时，你的模板必须像：

<any-tag-you-wish>template content</any-tag-you-wish>

请阅读doc for template in directive with replace mode on

我的Angular JS出了什么问题

1 个答案: