在Angularjs中遇到错误：[ ngTransclude :孤立]在模板中非法使用ngTransclude指令
在AngularJS中遇到错误：[ngTransclude:孤立]在模板中非法使用ngTransclude指令，这个错误通常是由于在模板中错误地使用了ngTransclude指令导致的。
ngTransclude指令用于在自定义指令的模板中插入原始内容。它允许在自定义指令的模板中保留原始内容，并将其插入到指定的位置。然而，ngTransclude指令必须与ngTransclude指令的容器元素一起使用，以确保正确的插入位置。
要解决这个错误，你可以按照以下步骤进行操作：
- 确保你正确地使用了ngTransclude指令。ngTransclude指令应该被放置在一个容器元素中，该容器元素将用于插入原始内容。例如：
<div ng-transclude></div>- 检查ngTransclude指令是否被正确地放置在自定义指令的模板中。确保ngTransclude指令被放置在正确的位置，以便插入原始内容。
- 确保你没有在ngTransclude指令的容器元素之外使用ngTransclude指令。ngTransclude指令只能在容器元素内部使用，否则会导致错误。
- 如果你使用了多个ngTransclude指令，确保它们分别被放置在不同的容器元素中，以避免冲突。
如果你仍然遇到问题，可以参考AngularJS官方文档中关于ngTransclude指令的使用说明，以获取更详细的信息和示例代码。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr
相关·内容
我用模板创建了自定义指令并替换: true。我可以从原始元素中设置代理所有属性的目标元素吗？有像ngTransclude这样的机制吗？默认情况下，它们会代理模板的父元素。
这是一个沙箱，没有问题：
因此，在本例中，我需要将红色边框应用于<i>元素，而不是父<label>。当然，我可以在链接函数中手动代理每个可能的HTML属性，但是有没有更优雅的方法呢？
UPD:请注意，这个问题比这个操纵示例更普遍。
浏览 1提问于2014-05-15得票数 3
回答已采纳
我不能在模板内部使用ng-transclude指令。我得到以下错误：
错误: ngTransclude :在模板中非法使用ngTransclude指令！找不到需要转移的父指令。要素：
<script type="text/ng-template" id="item.html">
<div ng-transclude>
</div>
</script>
<div ng-include="'item.html'"></div>
浏览 0提问于2015-08-25得票数 3
我在一个带有UI路由器的项目中使用了角向导，如果单击右侧的"Create“按钮，您可以看到一个演示：
该向导与当前项目分开工作很好，当我试图将它集成到我的应用程序时会出现问题--我在控制台中得到了这个错误：
Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div class="steps" ng-transclud
浏览 0提问于2014-03-14得票数 0
回答已采纳
1回答
问题是，当我尝试有条件地应用“has下拉”属性时，我会得到以下的角遮挡错误：
错误:无法找到指令“ngTransclude”所要求的$compile:ctreq控制器“hasDropdown”！它参考了angular.js第9563行
。我试图运用的逻辑是：
如果subNav数组是空的，那么就不要在元素中显示‘had-下拉’属性。
如果它不是空的，那么添加‘has下拉“属性。
我遗漏了什么吗？
<code>
<li ng-repeat="nav in app.mainNavItems"
{{app.mainNavItems.subNav
浏览 0提问于2014-11-04得票数 0
回答已采纳
我正在尝试创建一个图表指令(对现有的解决方案不感兴趣)。我希望使用bartemplate的子指令为每个栏定义可定义的模板。我想迭代bartemplate，所以我想使用ng-repeat和ng-transclude的模板就可以了.相反，角抛出一个错误。
Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-repeat="ba
浏览 0提问于2013-11-21得票数 2
回答已采纳
我们正在将我们的应用程序升级到角1.3.0。在这样做的过程中，我们遇到了一些问题，其中大部分似乎归结为ngTransclude在ngRepeat中的行为。
我们有一个指令，可以重复一堆项目，在它们周围有一个容器，但不拥有该容器的子容器。例如，下面是一个简化的示例：
<div ng-controller="myController">
There are {{items.length}} items.
<div my-directive items="items">
This item's name
浏览 1提问于2014-10-15得票数 5
回答已采纳
我得到了这段代码，其中一个指令在一个指令中：
<script>
app.directive('testChart', function () {
return {
restrict: 'E',
transclude: true,
controllerAs: 'chartCtrl',
template: '<div><ng-transclude><
浏览 2提问于2017-08-15得票数 0
回答已采纳
我有两个指令
app.directive('panel1', function ($compile) {
return {
restrict: "E",
transclude: 'element',
compile: function (element, attr, linker) {
return function (scope, element, attr) {
var parent = element.parent();
浏览 2提问于2013-12-21得票数 23
回答已采纳
我有一个模板，里面有很多本质上重复的代码。我想使用一个指令来包含一个部分模板，我可以对每个重复代码块进行操作。
当前的模板如下所示：
<div class="column book">
<div class="header">
<input type="text" id="book_query" ng-model="book_query.name" />
</div>
<div class="content"
浏览 3提问于2014-10-16得票数 0
回答已采纳
2回答
这可能是个愚蠢的问题，但我已经被困在这个问题上好几天了，谷歌搜索的解决方案中没有一个是为我提供的。
我正在按照指令驱动的方法编写一个角1.4应用程序，因此对于任何实体，我都有一个或多个小部件：
孤立范围
控制器作为
bindToController真
问题在于“用户有东西”的多样性。
<user-widget>
<stuff-widget userid="user._id"></stuff-widget>
</user-widget>
userid很好地传递到小部件中，但是我想在stuff小部件的链接函数
浏览 4提问于2015-08-31得票数 1
回答已采纳
1回答
转换的内容不能正确编译
、、、
当父作用域上的属性发生变化时，我需要重新编译指令的转换内容，然后获得整个编译后的HTML。
以下是指令：
<custom-directive title="bla">
<!--
Here I iterate over the parent scope's logs variable;
Nothing stays as result of the compilation
-->
<span ng-repeat="log in logs">{{ log }}</span>
<!
浏览 2提问于2015-09-17得票数 0
全部：
我是AngularJS指令范围的新手，我想知道当多个孤立的作用域指令分配给同一个元素时，AngularJS是如何处理作用域的。
例如：
app.controller("main", function($scope){
$scope.data = [
{
id:"id_1"
},
{
id:"id_2"
},
{
id:"id_3"
},
浏览 3提问于2015-06-11得票数 0
回答已采纳
我有HTML代码：
<div dynamic="html"></div>
AJAX响应中的Angular JS：
$scope.html = content;
我的dirrective dynamic如下所示：
.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function
浏览 3提问于2015-06-14得票数 1
我写了这段代码。
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hobby='AngularJS';
});
app.directive('outputText',function(){
return {
transclude: true,
scope: {},
template: &#
浏览 2提问于2014-09-30得票数 0
回答已采纳
我无法在自定义指令的控制器中设置范围变量。
参见这个plkr：
Link函数打印变量name，但内插器不计算{{name}}。我在我的自定义指令的控制器中设置了隔离作用域。不过，由于某种原因，作用域变量不会持久。这是预期的行为吗？如果是，那么设置范围变量的正确方法是什么？
我们很感激你的帮助。
浏览 3提问于2014-06-19得票数 1
回答已采纳
1回答
我在这个链接上学习AngularJS指令：
当我到达最后一个关于：创建通信的指令的例子时
我确实找到了这一行(来自script.js)：
title: '@' // Line 33 at the script.js
问题是我不知道这一行是什么意思，我知道标题是一个孤立的作用域属性，但是@是什么，我了解到：
'=' is where the attribute name is the same as the value
'=info' where info is the attribute
但是上面链接中的文档并没有解释什么是@，我
浏览 2提问于2014-01-25得票数 0
回答已采纳
为了说明我试图实现的目标，我将提供一个不完整的手风琴小部件：
我有两个手风琴面板指令，在我的HTML中相邻。
<accordion-pane>
<accordion-header>
<h3>Pane 1</h3>
</accordion-header>
</accordion-pane>
<accordion-pane>
<accordion-header>
<h3>Pane 2</h3&
浏览 6提问于2015-03-03得票数 2
我希望使用“ng-重复”生成多个表单，并将数据绑定到表单。我已经使用角js指令生成了HTML，但是事件并不是针对生成的html触发的。我认为角js无法在加载的DOM中找到那个HTML。
下面是我在柱塞上的代码：
生成HMTL之后，我希望通过"ng- submit“指令提交表单。我使用的是角js版本1.4.1，我的自定义指令是
<div custom-form formfor="eng" formforid="1"></div>
浏览 2提问于2015-07-27得票数 0
回答已采纳
我有一个元素，它的全部内容都可以被转换。转置是可选的，所以我可以让它的内部部分留下来，但内部元素被转置。让我们来看看它的实际效果：
<h4 class="modal-title" ng-transclude="title">
Are you sure you want to remove this <span ng-transclude="innerType">good</span>
</h4>
在指令定义中，我有：
myApp.directive('conf
浏览 12提问于2016-08-11得票数 5
回答已采纳
1回答
我希望创建一个包装器指令，作为列表中通知小部件的框架。在该框架中，我希望稍后根据来自notif对象的属性转换一些特定的内容。目前，我硬编码了一个div元素。
我在index.cshtml中有以下内容：
<div ng-controller="notificationCenterCtrl">
<ul>
<li ng-repeat="notif in allNotifications">
<notification-base notification="notif
浏览 2提问于2014-08-25得票数 3
回答已采纳
3回答
我设置了一个带有标题和apply/cancel按钮的通用对话框指令。该对话框有一个独立的作用域。
对话框指令的内容被屏蔽，因此它的作用域是对话框作用域的同级：
从角度上的js文档：
然而，孤立作用域会产生一个新的问题:如果一个已被屏蔽的DOM是小部件隔离作用域的一个子级，那么它将无法绑定到任何东西。因此，在小部件为其局部变量创建独立作用域之前，排除作用域是原始作用域的子作用域。这使得被屏蔽的和小部件隔离的作用域兄弟姐妹。
这给我带来了一个新的问题。被屏蔽的DOM应该能够在应用对话框时响应它。为此，我想在对话框上设置一个“应用”属性，并让被屏蔽的DOM监视它。但这是不可能的，因为他们是兄
浏览 1提问于2013-01-19得票数 7
回答已采纳
2回答
我有一个指令的问题，这个问题正在成为一个难以解决的问题，它似乎是由于1.0.8版和1.2.0版之间的angular变化引起的。
在使用版本1.0.8的中，您可以看到，在更改输入文件时，将调用fileChanged fn并更改$scope.file。
然而，在使用版本1.2.0的中，相同的代码不会更新指令
看起来它与a指令有隔离作用域，但不能有自己的作用域变量有关。例如，指令的控制器：
controller: function ($scope, $timeout, $upload) {
$scope.fileCount = 0;
}
我是不是漏掉了什么关键的东西？
浏览 0提问于2015-01-15得票数 0
我试图在AngularJS中构建一个包含其他AngularJS指令的模板的指令。我所有的指令都需要一个"id“属性，所以我需要在模板内的指令上设置"id”。然而，无论我如何做到这一点，AngularJS总是抛出这个错误：
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{field.id}}] starting at [{field.id}}].
http://errors.angularjs.org/1.4.6/$parse/s
浏览 6提问于2015-11-17得票数 1
回答已采纳
我不清楚在AnguarJS中有几个概念像-
(官方文档对这些概念有点混淆)。
我们什么时候应该使用"ngTranscluded"？
当我们需要创建一个不使用"angular.noop"？执行操作的函数时，情况将如何？
在什么情况下，我们应该使用插值，在什么情况下表达式？
如果有人能把这些小例子告诉我，那就太好了。
提前谢谢。
浏览 2提问于2016-05-05得票数 0
回答已采纳
我在学AngularJS。现在我正在尝试指令。我创建了一个指令，但我无法使它发挥作用。我可以用$scope来完成它，但是我想知道在没有它的情况下该如何做。代码：
<div ng-app="myApp" ng-controller="controls">
<div the-name></div>
</div>
<script src="angular.js"></script>
<script>
var modu = angular.module
浏览 1提问于2015-12-04得票数 1
回答已采纳
我是AngularJS的新手，在学习阶段，我遇到了ngTransclude，当我开始阅读文档的时候，我可以了解到，它到底能做什么，
你们中的任何一个人，请告诉我ngTransclude实际上是做什么的，当它被包含时，当它没有包含在指令中时，变化是什么。
请给我一个清楚的理解ngTransclude，有多重要，以及什么时候我们可以使用它。
浏览 0提问于2014-03-01得票数 0
回答已采纳
我已经创建了一个指令，用于显示作为一部分使用的另一个指令的示例。下面是一个示例：
<an-example>
<input ng-model="name" an-spellcheck />
</an-example>
我希望它复制放在其中的标记，并将其放入<code>标记中，以显示使用该指令所需的标记。
但是ng-model在输入中添加了类，使得：
<input class="ng-scope ng-pristine" ng-model="name" an-spellcheck />
浏览 3提问于2014-11-05得票数 1
1回答
我正在学习AngularJS中的指令，我看到了以下代码：
var app = angular.module('app', []);
//creating custom directive syntax
app.directive("myDir", function () {
return {
restrict: "E", //define directive type like E = element, A = attribute, C =
class, M = comment
scope: { /
浏览 1提问于2015-04-07得票数 0
回答已采纳
我使用的组合AngularJS 1.5.x和角材料。我将数据存储在../JSON/data.json中，我正在python3本地主机服务器上测试整个过程。
数据被正确检索并显示在中
我有一个HTML模板
<md-tab label="one" class="material-tab">
<md-content class="md-padding" layout="column" layout-align="center center">
<md-card class=
浏览 0提问于2016-03-30得票数 1
回答已采纳
1回答
根据这一点，我有一个指令和一个控制器(主要来自角JS指令PacktPub书)。
angular.module('myApp',[])
.directive('myIsolatedScopedDirective', function(){
return {
scope : {
'title' : '@msdTitle'
},
link: function ($scope, $element, $attrs) {
$scope.se
浏览 3提问于2014-03-18得票数 4
回答已采纳
我遇到了一个关于隔离指令和嵌套转换的问题，希望有人能告诉我发生了什么。
简而言之，我有两个指令，每个指令都有自己的隔离范围。
带有模板<div b><div ng-transclude></div></div>的
B与此模板<div><div ng-transclude></div><div>。
当我用
<div a>{{greeting}}</div>那么问候语就不会显示
<div a>{{somePrivatePropertyOfA&g
浏览 2提问于2013-08-05得票数 1
2回答
我写了以下指令：
transclude: true,
scope: { items: '=' }
...
<div class="row" ng-repeat="item in items">
<div class="col-xs-9">
<ng-transclude></ng-transclude>
</div>
</div>
在使用此指令时执行以下操作是否合法/良好做法？
cakes = [ { name: 'blueberry c
浏览 5提问于2015-02-17得票数 5
回答已采纳
1回答
递归AngularJS指令
、、、、
目前，我正在使用AngularJS进行一个项目，我需要创建一个指令，该指令能够显示(并更改)一个“递归结构”--类似于一个家族。控制器中定义的结构如下所示：
$scope.members = [
{ firstName: 'Andrei', lastName: 'Croitoriu', age: 32 },
{ firstName: 'John', lastName: 'Doe', age: 25, members: [
{
浏览 2提问于2015-01-06得票数 0
回答已采纳
我创建了一个自定义指令。
<foo>
</foo>
在这些标记中有访问html的方法吗？例如
<foo>
<div>
....
</div>
</foo>
我想在我的JS中访问这个div。
浏览 0提问于2019-08-05得票数 0
回答已采纳
4回答
在对角应用程序设置指令的孤立范围时，我遇到了问题：
这是我的app.js
var app = angular.module('myApp', []);
app.controller('mainController', ['$scope', function($scope) {
if ($scope.name == 'bob') {
console.log("It's bob")
}else if ($scope.name == 'joe') {
浏览 3提问于2016-08-01得票数 2
回答已采纳
我有一个类似列表的容器指令，它将内容转换为ng-重复。
模板如下所示：
<div ng-repeat='item in items'>
<div ng-transclude></div>
</div>
一个用法是这样的
<my-container>
foo
</my-container>
这如预期的那样起作用。但是，当我在模板中的ng-重复上面有任何指令时，例如
<div ng-style='{}'>
<div ng-repeat='item
浏览 1提问于2014-03-04得票数 5
回答已采纳
我正在尝试构建一个带有克隆按钮的“图表小部件”指令，该按钮将克隆图表并将其追加到原始文件后面。
该指令如下：
app.directive("chartWidget", function ($compile) {
return {
restrict: "A",
transclude: true,
templateUrl: 'chart-widget-template',
link: function ($scope, element, attrs) {
浏览 2提问于2014-02-27得票数 3
回答已采纳
因此，由于我在工作中的限制，我得到了一些相当长的包含。为了避免这种情况，我尝试创建以下指令：
app.directive('viewInclude', [function() {
var baseUrl = 'fams360frontend/views/default/glap';
return {
scope: {
viewInclude: '@'
},
template: '<div ng-in
浏览 3提问于2015-09-17得票数 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
回答已采纳
我有一个控制器，我想在我的指令中使用，我如何使用控制器的指令，我想访问指令中的所有控制器功能？
directive.js
angular.module('App').directive('deleteButtons', function (prcDeleteFactory,$rootScope) {
'use strict';
return{
restrict:'E',
scope:{
id: '=ids',
name: '@'
},
temp
浏览 1提问于2016-03-14得票数 0
回答已采纳
<country-select country_id="US"></country-select>
<country-select country_id="user.country"></country-select>
<country-select country_id="{{user.country}}"></country-select>
angular.module('picmonic.directives.country-select', [])
浏览 2提问于2015-08-21得票数 0
回答已采纳
我正在尝试将我的应用程序的一部分分割成一个指令，但请继续这样做：
Multiple directives [tree (module: anbud), tree (module: anbud)] asking for template on:
造成这种情况的原因是：
Multiple directives requesting isolated scope.
Multiple directives publishing a controller under the same name.
Multiple directives declared with the transclusion op
浏览 3提问于2015-12-21得票数 6
回答已采纳
在使用AngularJS中的指令时遇到一些问题。
我有以下HTML代码：
<div ng-controller="Controller">
<table>
<thead>
.......
</thead>
<tfoot>
.......
</tfoot>
<tbody>
<tr ng-repeat="values in Items.rows">
<td ng-repe
浏览 0提问于2013-09-30得票数 0
2回答
在angularjs指令的指南教程中，指令对象可以具有作用域属性。它定义了指令的范围。
虽然作用域atribute值可能为真，但以下是对作用域的解释：( )
true:将为指令的元素创建一个原型继承自其父元素的新子范围。如果同一元素上的多个指令请求一个新作用域，则只创建一个新作用域.
我对那些粗犷的句子感到困惑。如何在同一元素上使用多个指令并使用相同的作用域？
浏览 2提问于2017-05-05得票数 0
在AngularJS中创建小部件时，通常需要有一种为小部件指定配置选项的方法。下面是一个定制的AngularJS元素：
<typeahead items="items" prompt="Start typing a US state" title="name" subtitle="abbreviation" model="name" on-select="onItemSelected()" />
这就是指令：
typeAhead.directive('typeahead'
浏览 2提问于2014-07-21得票数 1
回答已采纳
我想在一个myObject模板中迭代AngularJS
--这不起作用:
<ul ng-if="Object.keys(myObject).length">
<li ng-repeat="(key, val) in myObject">
Value at key {{ key }} is: {{ val }}
</li>
</ul>
什么也没有出现，我怀疑是因为没有定义$scope.Object。
相反，我做了这个： :
在控制器/指令中：
$scope.sizeOf = funct
浏览 5提问于2014-03-27得票数 16
回答已采纳
我希望能够使用Angular2在我的服务器呈现的页面(ASP.Net MVC6)上进行客户端的数据绑定。
在不添加@view模板的情况下可以这样做吗？与其内联地定义它或创建外部模板，我想用app元素封装一个服务器呈现的HTML块。这就是我在Angular1中所做的，因为它允许我选择是在服务器端还是在客户端上进行数据库。
谢谢。
浏览 6提问于2015-07-16得票数 1
回答已采纳
2回答
我刚刚开始创建Angular指令(我也是这个框架的新手)，但遇到了嵌套指令似乎被忽略的问题。我的指令代码的基础是窗格"tabs“和”“指令。
要点是我希望能够编译一个“布局”中的“组件”列表。最后，每个“组件”标签上也应该有一个属性，它将指示布局从某个已知的模板位置呈现内容。但是现在，我甚至不能让component指令中的"link“函数触发，即使我的模板中有两个组件。
这是我的一段经历：
浏览 1提问于2013-05-04得票数 0
回答已采纳
2回答
我有两个简单的指令，它们在DOM中生成类似的元素。
两者都有一个独立的范围。
两者都对显示消息的metod进行ng单击。
其中一个在html文件中声明了ng-click，并在包含的范围内触发该方法。
另一种是指令模板中的ng-click，单击将触发孤立作用域中的方法。
为什么两种方法都不触发隔离作用域中的方法？
这是一个
Javascript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.na
浏览 1提问于2014-08-05得票数 0
回答已采纳
2回答
我创建了一个指令来理解转移和孤立的范围。下面是HTML：
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div>
<input type="text" ng-model="name" />
<input type="number" ng-model="friendCount" />
</div
浏览 1提问于2014-03-02得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
