错误:创建自定义指令时，模板必须恰好有一个根元素
这个错误是由于在创建自定义指令时，模板中没有恰好一个根元素导致的。在Vue.js中，每个组件的模板必须有一个根元素来包裹所有的内容。这是因为Vue.js在渲染组件时，需要将组件的模板编译成一个函数，然后通过该函数生成虚拟DOM并进行渲染。
解决这个错误的方法是在模板中添加一个根元素来包裹所有的内容。可以使用一个<div>元素或者其他合适的HTML元素作为根元素。例如：
<template>
<div>
<!-- 模板内容 -->
</div>
</template>在这个例子中，我们使用了一个<div>元素作为根元素来包裹模板的内容。你也可以根据实际情况选择其他合适的HTML元素。
关于自定义指令的更多信息，你可以参考腾讯云的文档：
腾讯云也提供了一些与Vue.js相关的产品，例如云函数SCF（Serverless Cloud Function）和云开发（CloudBase）等，可以帮助你更好地构建和部署Vue.js应用。你可以在腾讯云官网上找到相关产品的详细介绍和文档。
相关·内容
当我使用angular的指令时，我得到了这个错误。
Error: [$compile:tplrt] Template for directive 'header' must have exactly one root element. /apps/dhe.techForm/views/directives/header.html
http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=header&p1=%2Fapps%2Fdhe.techForm%2Fviews%2Fdirectives%2Fheader.h
浏览 0提问于2016-02-26得票数 0
我刚遇到这个问题，我想知道这是一个错误还是预期的行为？这只是一个小例子来说明这个问题。在这两个示例中都使用了下面的代码：
<body ng-app="app" ng-controller="AppCtrl">
<item-directive ng-repeat="item in ::items" item="item"></item-directive>
</body>
angular
.module('app', [])
.controlle
浏览 3提问于2015-02-21得票数 8
在angularJS 1.3.14中
var app = angular.module('myApp',[]);
app.controller('myController',['$scope',function($scope){
$scope.name = 'world';
}]);
//here i created directive of name helloWorld
app.directive('helloWorld',function(){
return {
replace
浏览 5提问于2015-12-23得票数 2
回答已采纳
我试图创建指令，它将从外部源嵌入映射到iframe中，源是静态的，但是参数将绑定到指令，并且可以由控制器控制，通过实时发送的新参数重新呈现iframe。
代码：
angular.module('Utilities').directive('gisMap', [
'$sce',
function ($sce) {
return {
scope: {
location: '=',
},
res
浏览 2提问于2021-04-25得票数 0
Error：angular.js:13920错误:指令“页脚”的$compile:tplrt模板必须有一个根元素。app/components/脚注/view/footer.html
我试图通过指令调用页脚，而不超过ng包含。他犯了一个根本错误，但这条路是正确的。我不明白为什么会有这个错误。我还没有尝试我的标题，但可能有同样的错误。
索引：
<div footer> </div>
页脚：
<!-- Footer Section -->
<section class="services-section">
<div c
浏览 4提问于2016-10-21得票数 0
回答已采纳
似乎AngularJS在处理HTML模板第一行中的注释时遇到了问题。
控制台给出了以下错误：
Error: [$compile:tplrt] http://errors.angularjs.org/1.3.15/$compile/tplrt?p0=deviceItem&p1=deviceItem.html
at Error (native)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js:6:417
at https://cdnjs.cloudflare.com
浏览 2提问于2015-04-03得票数 0
回答已采纳
2回答
我遇到了以下问题:我的客户想要我的角度指令，以改变外观完全集中。这意味着，当用户单击该元素时，我将需要完全替换该模板。我在网上找不到答案，所以决定问。
我试图在指令的模板部分传递“非聚焦”模板，并将其绑定到链接中的焦点事件，如下所示：
post: function (scope, element, attrs) {
element.bind('focus',function(event){
element.html('<span..../span>');
$compile(element
浏览 1提问于2015-09-23得票数 0
回答已采纳
尝试了几种不同的解决方案，不知道我到底哪里出了问题。我知道这个指令是正确链接的，并且已经尝试了模板而不是templateURL来测试它是否会那样工作，但是什么也没有。
指令：
app.directive('printTasks', function() {
return {
restrict: 'E',
replace: 'true',
scope: {
info: '='
},
templateUrl: '../printTasks.html'
};
});
浏览 5提问于2015-10-12得票数 1
回答已采纳
1回答
我已经创建了下面的模式，其中产品是一个数组，但是XSD验证(在eclipse中)指出maxOccurs="unbounded“minOccurs="0”不能在根元素上使用。那么如何在XSD中表示这种结构呢？下面是我的XSD的外观。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element ma
浏览 0提问于2015-04-07得票数 0
1回答
在每个角度模板中，我们必须定义根html节点，然后在其中定义指令的Html。
有没有一种角度上忽略根节点的方法？例子：
我的指令模板：
<div class="space consuming div, and absolute positioning breaker">
<div class="content positioned relative to the directives parent 1"></div>
<div class="content positioned relative t
浏览 3提问于2013-12-01得票数 0
1回答
Laravel和Vue模板错误
、、、、
我第一次在Laravel5.3中使用vue，目前我可以在vue中使用Jquery请求来获取数据，但是我在显示它时遇到了一些困难。这是我目前的脚本:这是我的观点：
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu" id="messagesArea">
<messages></messages>
</ul>
</li>
<!-- Further Do
浏览 0提问于2016-12-06得票数 0
回答已采纳
Angular指令文档说：“如果设置为true，那么将为此指令创建一个新的作用域。如果同一元素上的多个指令请求一个新的作用域，则只创建一个新的作用域。新的作用域规则不适用于模板的根，因为模板的根总是获得新的作用域。”
我的问题是最后一句。我假设" template“指的是指令的模板，但在测试一个简单的指令时，如果不设置" scope : true”，就不会创建新的作用域。我是不是漏掉了什么？
浏览 1提问于2014-10-06得票数 2
2回答
我试图使用一些分层数据构建一个非常简单的自定义指令。列表中的每一页都有子页，数据的形式如下：
{"Title 1": "Page Title", "Id": "1", "Pages": {"Title 1.1": "Page Title 1.1", "Id": "2"}, {"Title 1.2": "Page Title 1.2", "Id": "3"}}
诸若此类。这里的数据只是一个简
浏览 2提问于2015-11-04得票数 0
回答已采纳
2回答
我正在尝试制作一个简单的post列表组件，其中我使用了v-for指令，但是我看到了以下错误：
"eslint-eslint: the template root disallows v-for directives"
我应该如何循环和渲染每个帖子？
我将allBehaviourPosts从Laravel后端作为一个支柱传递给组件，如下所示：
<related-post-list :relatedBehaviourPost= {{ $relatedBehaviourPosts }}></>
我的组成部分：
<template>
<div
浏览 2提问于2018-10-19得票数 17
回答已采纳
我想使用角1.5的component()方法。但是，在同一个DOM元素上应用不同的组件似乎是不可能的。这是因为，无论我如何在component()调用中设置隔离属性，都会创建一个新的作用域，从而导致错误消息：
$compile:multidir多指令..。要求新的/孤立的范围
这并不令人惊讶，因为组件()定义了这样的作用域创建：
scope: options.isolate === false ? true : {}
因此，我的问题是:这是一个bug还是通常不支持在一个DOM元素上包含多个组件？我知道我可以使用指令()，但考虑到角度2迁移，我宁愿将所有内容都移到component()中
浏览 2提问于2016-01-06得票数 3
当我将replace属性设置为true时，浏览器崩溃了。这里是柱塞链接：有什么问题？
index.html
<!doctype html>
<html ng-app="cvApp" ng-cloak>
<head>
<meta charset="utf-8" />
<title>
Mixing Static And Dynamic Options In An AngularJS Select Menu
</title>
</head>
浏览 1提问于2013-06-26得票数 1
回答已采纳
在尝试使用自定义指令并将输出链接到文本字段im时，请发出以下命令
指令“$compile:tplrt”的myDir模板必须有一个根元素。$compile/tplrt?p0=myDir&p1=有人能在这里显示一些光吗？
码
<!DOCTYPE html>
<html ng-app="myapp1">
<head>
<title> ANGULAR</title>
<script src="angular.min.js"></script>
&
浏览 8提问于2016-07-07得票数 0
回答已采纳
我目前正在维护一个遗留的AngularJS应用程序(v1.3.8)。
为什么演示应用程序给我以下错误？
Template for directive 'handleTable' must have exactly one root element.
sandbox.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script&g
浏览 2提问于2015-04-08得票数 0
回答已采纳
任何精通Angular.js的人都可能知道这件事.
我的问题是为什么和怎样才能避开这一切。在使用表时，并不总是能够将指令的内容分组为单个父元素。那我怎么才能避开这一切。我知道ng-重复使用多个元素替换单个元素，并且有一个父包装器，所以它必须是可能的。最简单的方法是什么？
--更新--
有..。
<td class="text-right">{{dsfgsdf.sdfgdsf.dsfg}}</td>
<td class="text-center">dsfgsdfg</td>
<td class="te
浏览 6提问于2013-11-19得票数 0
回答已采纳
8回答
我是刚接触过天使的。我正在尝试创建包含输入元素和按钮的新指令。当单击按钮时，我希望使用此指令清除输入文本。
当我在html中使用我的指令时，我得到的错误如下：
Error: [$compile:tplrt] Template for directive 'cwClearableInput' must have exactly one root element.
html：
<div class="input-group">
<cw-clearable-input ng-model="attributeName"
浏览 9提问于2015-01-16得票数 20
回答已采纳
我有这个HTML代码：
<div ng-repeat="(name, input) in loginCtrl.loginModel">
<input type="{{input.type}}" name="{{name}}" ng-model="input.model" placeholder="{{name | translate}}" ng-minlength="5" input-status required/>
<!
浏览 3提问于2015-09-01得票数 0
1回答
我正在努力学习和理解UI-路由器的角度为1.3.15的能力。
我试图设置一个应用程序，其中有许多视图，其中有一个页眉和页脚指令。它还有更少的视图不需要这个设置，加载的视图占据整个页面。
因此，我似乎应该处理这种“一级向下”的分歧，如下面的图表所示。在过去，我使用带有页眉/页脚指令的index.html编写ui路由器应用程序，并为其他页面加载一个ui视图。这一次，我正试图从一开始就让它变得正确。欢迎意见和建议。
浏览 4提问于2015-04-03得票数 0
回答已采纳
2回答
我已经创建了一个简单的angularjs指令来输入城市和邮政编码。它工作得很好，除了如果我在同一个控制器中使用了两次，输入字段中的值是重复的！我相信这是一个范围问题，但我不知道如何解决它？
FDVilleModule = angular.module('FDVille', []).
directive('fdVille', () ->
return {
restrict: 'E'
require: 'ngModel'
template: """
浏览 1提问于2013-02-25得票数 2
回答已采纳
我有一个表，其中的行通过ng-repeat重复。我正在尝试创建一个模板，该模板为每个行<tr>生成列<td>
app.directive("customtd", function(){
return {
restrict: 'E',
template: "<td>{{position.Name}}</td><td>{{position.Code}}</td>",
replace: true,
scope: {
position:
浏览 1提问于2013-08-25得票数 11
回答已采纳
2回答
以前有一个replace-property，用于角中的指令，现在不推荐它了。
angular.module('myModule')
.directive('myDirective', myDirectiveCtrl);
function myDirectiveCtrl() {
return {
'restrict': 'A',
'scope': false,
'replace': true,
'template
浏览 4提问于2016-01-08得票数 2
回答已采纳
3回答
在我的软件中，我试图创建一个返回任何xml文件的类，看看代码和它给我的错误，我想不出如何纠正它：
Xml：
<everConfigured>
<value>false</value>
</everConfigured>
<ServerPort>
<value>9000</value>
</ServerPort>
<ClientPort>
<value>8000</value>
</ClientPort>
XML读取器类：
public
浏览 3提问于2014-04-19得票数 0
回答已采纳
2回答
我正在尝试将列表项转换到我的自定义指令中。
我的“列表”自定义指令的模板很简单：
<ul>
<li>directive item</li>
<li>directive item</li>
<li>directive item</li>
<div ng-transclude><div>
</ul>
然后，我像这样使用我的指令
<list>
<child-list></child-list>
浏览 2提问于2015-10-14得票数 1
使用本教程
http://www.cozmoslabs.com/1012-wordpress-user-registration-template-and-custom-user-profile-fields
我已经为我的网站的前端创建了自定义的登录和注册表单，但是，有什么方法可以扩展这些表单以具有recaptcha验证字段。
提前感谢
浏览 0提问于2011-07-30得票数 1
2回答
我指的是AngularJS文档，但无法得到“注释指令”，因为它实际上遇到了一个错误。详情如下：
HTML:-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script type="text/javascript" src=&#
浏览 6提问于2017-02-08得票数 0
回答已采纳
我在meteor上有一个带angularjs的基础应用。我使用了zf-as-button指令，但它显示错误
Template for directive 'zfAsButton' must have exactly one root element
我发现这个问题可以通过将指令模板封装到div或span中或者删除replace: true来解决，但我不能对基础包执行此操作，因为它包含在gitignore中，在其他情况下不起作用。其他人也有这个问题吗？任何帮助都将不胜感激
谢谢你
浏览 1提问于2015-06-09得票数 0
在使用AngularJS编写错误消息指令时，我一直在努力解决范围问题。
我有一个ng-if和ng-class指令作为指令模板的一部分，但是ng类指令中的表达式似乎总是返回一个空字符串，除非：
我删除了ng-if指令。
或者，我删除了指令定义对象中的“替换”键。
查看我的指令的编译输出，如果ng-if或替换键被移除，看起来就会创建一个孤立的作用域，但是如果它们都留在html输出中，那么html输出中就没有ng-隔离范围类，只是ng-作用域。
我真的很想确切地了解这里发生了什么，并对任何解释表示感谢。
指令定义
angular.module('myMessages'
浏览 4提问于2016-03-27得票数 6
回答已采纳
我已经用角创建了一个指令，指令的模板使用ng-重复，在模板中有一个按钮，其中有一个单击处理程序，它使用ng-click分配给它。
.directive('webEvent',function(){
return{
restrict:'E',
replace: true,
scope: {
events: "="
},
template:"<div class='row' ng-repeat='event in events'>"+
浏览 7提问于2016-03-11得票数 0
回答已采纳
由于脚本无法在模板中加载，因此由于没有编写jQLite来实现它，所以我决定在wasn之前添加jQuery库，因为它检查jQuery是否存在，而且瞧，它是有效的。但是，我在这里问一个问题，意味着有一个‘但是’，所以，脚本不会在加载内容之前执行。当然，我在路线上耍了个小把戏。
在模块的配置部分，我做了以下操作：
$routeProvider
.when("Business/:Context/:View?", {
templateUrl: function (url) {
return &
浏览 3提问于2016-07-19得票数 1
1回答
我希望使用一个jaxb编组程序实例生成以下xml结构。
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ABC>//root element
<BCD>
<DEF>
<EFG>xyz</EFG>
<FGH>
<GHI>PASSWORD_1</GHI>
浏览 8提问于2017-01-30得票数 1
1回答
我觉得我缺少了角度指令的基本概念。
引用这个Plnkr：
我有一个模型：
{
message: string,
value: number
}
我有一个itemEditor指令来编辑这个模型：
.directive('itemEditor', function() {
return {
replace: true,
templateUrl: 'item.editor.html',
require: 'ngModel',
model: {
item: '=n
浏览 1提问于2015-08-18得票数 0
回答已采纳
我有一个简单的xml文档
<?xml version="1.0" encoding="UTF-8"?>
<root xmlns="http://example.org/attributes">
<record>
<codice_fiscale>IT07654930130</codice_fiscale>
<indirizzo tipo="casa">Viale Carlo Espinasse 5, Como</in
浏览 2提问于2016-07-19得票数 3
回答已采纳
我试图遵循最佳实践建议，并使用指令封装可重用的HTML元素。错误信息：
错误:模板必须有一个根元素。作用力:partials/user/path/to/omedata.html
指令代码：
.directive('stDirectivename', function() {
return {
restrict: 'E',
replace: true,
// transclude: false,
template: 'partials/user/path/to/somedata
浏览 4提问于2013-10-30得票数 7
回答已采纳
1回答
我试图用angularJs创建简单的指令，但不明白下面的代码为什么会给出以下错误：
Error: [$compile:tplrt] http://errors.angularjs.org/undefined/$compile/tplrt?p0=taWithMessage&p1=customButton.html
守则是：
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angula
浏览 2提问于2014-06-25得票数 0
回答已采纳
我是XML编码的新手，目前正在阅读有关它的文章。我从一个flash游戏中得到了一个设置文件，我正在尝试玩它，以了解它是如何工作的，更改问题，更改正确答案等。
在使用XMLVP打开它时，我得到了顶层错误。我读到应该只有一个根元素，它应该是<?xml version="1.0" encoding="UTF-8"?>，但我在早期阶段并不熟悉。
<?xml version="1.0" encoding="UTF-8"?>
<Title>Who wants to be a Millionaire?!<
浏览 2提问于2015-02-12得票数 0
1回答
我正在尝试通过关注来学习Spring。我使用IntelliJ在src文件夹的根目录下创建了一个spring.xml文件。但我得到了以下错误：
我的XML有什么问题？如何修复它？谢谢!
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE properties SYSTEM "http://java.sun.com/dtd/properties.dtd">
<properties/>
<beans
浏览 0提问于2016-04-06得票数 0
2回答
角方向不起作用
、、
我刚接触到角，我正在尝试构建我的第一个指令，但它不是在我的HTML中呈现。
下面是我的HTML页面:在HTML底部调用该指令
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type
浏览 0提问于2014-11-30得票数 1
回答已采纳
1回答
//store
export default {
state: {
aboutModels: []
},
actions: {
findBy: ({commit}, about)=> {
//do getModels
var aboutModels = [{name: 'About'}] //Vue.resource('/abouts').get(about)
commit('setModels', aboutModels)
}
},
getters: {
浏览 9提问于2016-09-18得票数 9
回答已采纳
我喜欢把角元件看作元素指令。给定一个名为hero的组件，我可以在父模板中使用它，如下所示：
<hero myparam="something"></hero>
我想使用hero元素作为一个组件管理容器，组件负责整个元素。
期望
下面是我希望从上面得到的约束：
<hero id="component123" class="alien" custom="foo">text</hero>
我的自定义组件转换给定的元素，并视需要使用它。
实际
但是，该组件似乎只能将其模板在中呈现为英雄元素。
浏览 3提问于2016-07-15得票数 1
回答已采纳
我想知道，Angular团队是否计划为ngfor添加一个数字或变量？这对于开发来说将是非常舒适的。
目前，我们必须创建一个伪表
fakeArray = new Array(12);，然后是<li *ngFor="let a of fakeArray"></li>
感谢你的社区。
浏览 7提问于2018-01-16得票数 1
回答已采纳
我喜欢观察指令中输入元素的有效性。我的控制器总是undefined。如何查看输入元素上的$valid、$invalid等属性？
app.directive("myElement", function()
{
return {
restrict: "A",
templateUrl: "./Templates/tooltip.html",
scope: {
},
compile: function (element, attrs) {
re
浏览 2提问于2013-12-13得票数 0
回答已采纳
3回答
以下代码似乎没有从定义的指令中打印出文本：
<div ng-app="myApp">
<!-- directive: devComment -->
</div>
<script>
app.directive("devComment", function(){
return{
restrict : "M",
replace : true,
浏览 1提问于2016-09-23得票数 1
回答已采纳
XSLT非常新，我正在尝试将xsi:schemaLocation添加到我的输出中，但是我做了一些错误的事情。
以下是xslt代码：
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xsi:schemaLocation="http://www.ems-ag.de/xmlschemas/tst/TEST.
浏览 3提问于2015-05-01得票数 2
回答已采纳
我希望我的指令作为v-如果在我的指令中，我必须检查访问权限和销毁元素，如果它没有访问。
这是我的密码
Vue.directive('access', {
inserted: function(el, binding, vnode){
//check access
if(hasAccess){
vnode.elm.parentElement.removeChild(vnode.elm);
}
},
});
vue文件
<my-component v-access='{par
浏览 1提问于2020-06-05得票数 2
回答已采纳
我正在尝试创建一个指令，它将动态地将模板的内容添加到DOM中。就像角数据报警器一样。
我希望有这样一个指令，如属性指令。例如，我会用它来做按钮。单击按钮时，表单就会显示出来。从技术上讲，我考虑使用链接函数，将回调绑定到元素onClick事件，并使用element.insertAfter方法在回调中添加模板内容。
问题是，我无法访问templateURL加载的模板。第二个问题是属性指令的默认行为--它会自动将模板作为元素的子元素追加。有办法禁用它吗？
浏览 1提问于2014-09-17得票数 0
1回答
我在AngularJS中创建了一个日期时间范围指令。我正在使用插件来获取日期，时间范围日历。指令运行良好，模型值也在改变，但视图没有更新。
element.data('daterangepicker').setStartDate(val.start);
element.data('daterangepicker').setEndDate(val.end);
有人能告诉我这个问题的解决方案吗。
我创建的指令如下所示
脚本
app.directive('dateTimePicker', function($parse,
浏览 0提问于2015-02-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
