ng-指令元素(replace: true)和指令模板中的ng-组合不正确
ng-指令元素(replace: true)是AngularJS中的一个指令选项，用于指定指令在DOM中的替换行为。当replace选项设置为true时，指令元素将会被指令模板所替换，而不是被包裹在指令模板中。
ng-组合是AngularJS中的一种特殊语法，用于将多个指令组合在一起使用。它通过在同一个元素上使用多个指令来实现特定的功能。
然而，ng-指令元素(replace: true)和指令模板中的ng-组合不正确，因为replace选项已在AngularJS 1.3版本中被废弃，并在1.4版本中移除。这意味着在较新的AngularJS版本中，replace选项不再可用。
在AngularJS中，可以使用ng-组合来实现多个指令的组合。例如，可以将ng-model和ng-required指令组合在一起使用，以实现表单输入字段的双向绑定和必填验证。
对于这个问题，没有特定的腾讯云相关产品或产品介绍链接地址与之关联。
相关·内容
在使用AngularJS编写错误消息指令时，我一直在努力解决范围问题。
我有一个ng-if和ng-class指令作为指令模板的一部分，但是ng类指令中的表达式似乎总是返回一个空字符串，除非：
我删除了ng-if指令。
或者，我删除了指令定义对象中的“替换”键。
查看我的指令的编译输出，如果ng-if或替换键被移除，看起来就会创建一个孤立的作用域，但是如果它们都留在html输出中，那么html输出中就没有ng-隔离范围类，只是ng-作用域。
我真的很想确切地了解这里发生了什么，并对任何解释表示感谢。
指令定义
angular.module('myMessages'
浏览 4提问于2016-03-27得票数 6
回答已采纳
我有一个指令，它的模板中有ng-class用法。当我试图在父元素“useage”中添加ng-class时，它会爆炸，它会说：
Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 48 of the expression [{ 'active': $stateParams.recordId === row.id }
{ 'ng-table-selected': selectedRow && selectedRow.id ==
浏览 3提问于2014-05-19得票数 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
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
回答已采纳
1回答
我编写了一个名为lobInclude的指令，我想要和ngInclude一样，但是没有作用域：
.directive("lobInclude", ["$templateRequest", "$compile", function($templateRequest, $compile) {
return {
restrict: "A",
scope: false,
compile: function() {
r
浏览 2提问于2015-07-09得票数 0
回答已采纳
为什么replace=true或replace=false在下面的代码中没有任何影响？
为什么在replace=false时没有显示“一些现有的内容”？
或者更谦虚地说，您能解释一下指令中的replace=true/false特性是什么以及如何使用它吗？
示例
JS/Angular：
<script>
angular.module('scopes', [])
.controller('Ctrl', function($scope) {
$scope.title = "hello
浏览 32提问于2014-03-19得票数 94
回答已采纳
2回答
我有一个外部控制器，它在视图中包含一个指令。该指令获取流程点的列表，并生成链接，您可以在其中选择每一个。它正确地设置了链接函数中的HTML，但是链接的ng单击操作不起作用。
有什么想法吗？)
非Plunkering的代码
HTML
<!DOCTYPE html>
<html>
<head><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
浏览 7提问于2013-08-03得票数 4
回答已采纳
2回答
我无法在指令中得到一个ng-如果评估。我首先调用一个返回布尔值的方法，但是无论结果是ng-如果不获取结果，它总是计算为false。
为了尝试并指出问题，我尝试了一个简单的内联表达式(下面)，但即使这样，也总是计算为false。当我移除ng-if时，div会显示。我做错了什么？
.directive('handsUpVideoOverlay', function() {
return {
restrict: 'E',
replace: true,
scope: false,
template: '<div clas
浏览 2提问于2017-03-17得票数 0
2回答
我在我的应用程序中遇到了一个问题，我想要有一个指令，在它的模板中，它应该有条件地决定是否在其中递归地呈现相同的指令。我尝试重新创建它，这个例子也不起作用。没有呈现指令，也没有错误。不过，我本可以在这件事上犯不同的错误。
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/li
浏览 3提问于2016-03-21得票数 2
回答已采纳
7回答
我正在尝试创建一个指令，该指令允许将元素定义为可单击或不可单击，定义如下：
<page is-clickable="true">
transcluded elements...
</page>
我希望得到的HTML是：
<page is-clickable="true" ng-click="onHandleClick()">
transcluded elements...
</page>
我的指令实现如下所示：
app.directive('page', functi
浏览 5提问于2014-03-01得票数 32
回答已采纳
3回答
在angular JS中，我们有一个名为replace的属性，在定义指令时，可能的值为true或false。但我不明白这个属性将如何使用。当它被设置为true时，它是否会替换HTML父元素
浏览 0提问于2016-03-04得票数 0
1回答
我有Javascript (角自定义指令)如下：
var addedSubject = function($rootScope){
return{
restrict:'E',
templateUrl:'/static/html/marks_app/directives/added_subject_item.html',
replace:true,
scope:{
},
controller:["$scope", function($scope){
$
浏览 1提问于2016-12-29得票数 1
回答已采纳
我正在使用angularjs开发一个示例播放器，使用元素指令。我希望指令模板中的事件保持在指令中。换句话说，如何使用指令中的控制器来创建仅限于指令模板中的元素的事件。
该指令：
logsApp.directive('logPlayer', function() {
return {
restrict: 'E',
replace: true,
scope: {audio: '='},
template: '<div ng-repeat="sample in
浏览 2提问于2016-02-18得票数 4
回答已采纳
1回答
我试图允许一个带有隔离作用域的指令调用它的父指令的作用域上的函数。我读过许多在指令的范围声明中使用'&‘符号来实现这一点的例子，但是由于指令在ng重复和ng开关中使用，范围继承似乎阻碍了我的工作。这个函数似乎没有达到我的指令范围。
我可以通过向上的父链($scope.$parent.$parent.$parent.removeElement()工作来实现这个函数)，但这感觉很恶心。有办法绕道吗？
家长指令：
function dynamicLayoutDirective($compile, $log, bevoLayoutEngine, layoutService) {
浏览 3提问于2014-12-22得票数 1
回答已采纳
我想粘贴一些额外的HTML数据到HTML元素中。所以我使用了ng-bind-html方法，而且我使用了"trustAsHtml“。一切都很好。将显示HTML结构。当我想要从生成的结构中获取一个元素时，问题就开始了。有一个id为"specyfication“的元素。这就是为什么我试图使用放置在bellow下的命令来获取它，但我收到了null。
$document[0].getElementById('specyfication')
这个问题已经消失了，当这个操作是从一些按钮初始化，但我需要它没有任何额外的点击等。
我认为必须有一些选项来刷新"$docume
浏览 3提问于2019-07-24得票数 0
1回答
ng-重复内部自定义指令
、、、、
因此，我很难将范围传递给我的自定义指令。
这是我的html
<li ng-repeat="post in posts | filter:search | orderBy:sortField:reverse" class="archives-listing" ng-class="{'last-border':$last}">
<archive-notes></archive-notes>
</li>
这是我的指示
app.directive('archiveNot
浏览 2提问于2014-06-03得票数 1
回答已采纳
我正在通过开发地图指令来学习angularjs。最外层的指令是myMap，其次是myCircle，myMarker等等.是子指令。此时，我只有myMap和myCirle指令。如果我不使用ng-重复，地图和圆圈就能正常工作。一旦我使用ng-重复，angularjs就会抛出异常。
...：当我开始绘制地图时，TypeError:无法在上读取null的属性'insertBefore‘。我花了很多时间，但仍然不知道如何解决它。任何帮助都将不胜感激。
这是我的柱塞：
app.directive('myMap', function () {
return {
浏览 2提问于2014-08-15得票数 2
回答已采纳
4回答
我正在建立一个指令，以卡片的形式。当我加载卡模板，我想确保卡是隐藏的，如果用户以前隐藏了卡。我可以通过request.hide属性来跟踪它。
这是我的指令(基本原理)：
app.directive('request', ['$http', '$timeout', function($http, $timeout) {
return {
replace: true,
templateUrl: '/assets/request.html',
transclude: false,
浏览 7提问于2016-03-07得票数 2
回答已采纳
2回答
角文档在单选按钮上用于ng模型的是在每个输入元素上重复ng模型。
我希望它更干，以避免错误。
UPD I还希望在html中显式声明每个输入元素(即输入元素在html中重复，但ng模型没有)。因此，我不希望使用在指令中生成输入元素的解决方案，但是修改现有输入元素的指令很好。
是否有方法只为一组单选按钮输入指定一次ng模型？
FWIW，我尝试创建一个指令(在包含输入的div上)，它向每个输入元素添加了一个ng模型属性，虽然它导致了正确的DOM，但是输入没有绑定到范围。指令的优先级>0 (ng-模型具有优先级0)。
浏览 4提问于2014-06-13得票数 0
回答已采纳
我使用指令来显示html片段。
以及指令中的templateUrl，以便能够将代码片段作为html文件包括在内。
如果我试图在内置-重复指令中调用({{snip}}按原样传递)，则该指令无法工作：
div ng-repeat="snip in ['snippet1.html','snippet2.html']">
<my-template snippet="{{snip}}"></my-template>
</div>
为供参考，以下是指令：
app.directive("my
浏览 5提问于2015-02-09得票数 2
回答已采纳
我尝试将行"isrcrow“指令添加到表中，如下所示：
<table class="table">
<thead><tr>
<th>Artist Name</th>
<th>Track Title</th>
<th>Version</th>
<th>Track Duration</
浏览 1提问于2014-02-26得票数 32
2回答
我是AngularJS的新手，
我正在尝试创建一个自定义指令，将jQuery JScrollPane (JScrollpane.kelvinluck.com)应用于div。
我有以下html代码：
<scrollPane> ------> WRONG
<div scroll-pane> -----> RIGHT
<ul>
<li data-ng-repeat="task in tasks">
<div class="task-element">
浏览 2提问于2013-07-24得票数 2
回答已采纳
在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
回答已采纳
1回答
我试图将我们的头代移动到一个指令中，但是当使用这个指令时，标题就失去了它们的样式，最后会在左边拥挤。有人能给我指点我做错了什么吗？
标题如下所示：
Col1Col2Col3Col4Col5
而不是当我在没有指令的情况下使用相同的html。请注意，它们正确地对齐了它们的数据列：
Col1 Col2 Col3 Col4 Col5
index.html
<table class="table table-hover">
<thead>
<table-headers></t
浏览 0提问于2015-06-25得票数 0
回答已采纳
1回答
我试图用AngularJS的ng-重复指令显示一个数据数组。此html代码在相同的控制器下工作，并具有与constants变量更新的异步相同的作用域：
<div class="popup3" id="constant_insert">
<h2>Insert constant</h2>
<select id="constants" ng-model="clonedModel.category" ng-options="c.name for c
浏览 3提问于2014-02-03得票数 0
回答已采纳
我认为这可能是的重复，只是我在代码中没有使用原语。我有一个指令，用来动态地将内联svgs放到我的视图中。它的工作方式如下：
app.directive('icon', ['$timeout', function($timeout) {
return {
restrict: "E",
scope: {
href:"@",
title: "@"
},
replace: true,
templateUrl: $timeout(function(elm,a
浏览 3提问于2014-08-29得票数 1
回答已采纳
我正在尝试构建一个指令，以减少文本字段的样板，在该指令中，可以通过模型传递诸如字段可见性之类的东西的服务器端声明。
我想从一个templateUrl中加载一个普通字段的HTML，根据模型转换它的DOM (向这个模板添加各种属性和指令)。
我让它将适当的ng模型绑定到嵌套的输入字段，但是当我试图将ng隐藏应用到顶级元素时，它会显示在DOM中，但不会生效。
如果它正常工作，代码(到目前为止)应该隐藏字段，但它不是。
代码位于，转载如下：
angular.module("directives", []).
directive('tuTextField',
浏览 3提问于2013-12-20得票数 1
回答已采纳
1回答
假设我有这样一个简单的指令：
app.directive('seo', function() {
return {
template: '<meta ng-repeat="tag in data" {{tag.attribute}}="{{tag.name}}" content="{{tag.content}}" />',
scope : {
data: '='
},
restrict: &#
浏览 3提问于2015-12-16得票数 0
回答已采纳
当ng-include指令无法获取资源时，我想显示默认的html内容。
当角取包含源时，服务器返回http状态码500或440，忽略故障，并且不显示内容以代替include指令。我的应用程序中有多个包含指令，我想为每个应用程序显示一个不同的消息。
浏览 3提问于2014-08-19得票数 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
回答已采纳
我正在尝试将简单的ng-mouseover绑定添加到由指令管理的元素。但是不能让它工作。
@
在添加ng-mouseover绑定后，我尝试重新编译元素。directive.compile和外部控制器运行，但directive.linker不运行。
@
我已经将$compile‘’ing移到了链接器中。它运行得很好，ng-mouseover也运行得很好，但是在链接器中重新编译会导致无限循环，最终导致浏览器崩溃:)
如何使用指令将ng-*绑定添加到元素？在这些方法中，我做错了什么？
浏览 0提问于2013-08-13得票数 5
我试图创建指令，它将从外部源嵌入映射到iframe中，源是静态的，但是参数将绑定到指令，并且可以由控制器控制，通过实时发送的新参数重新呈现iframe。
代码：
angular.module('Utilities').directive('gisMap', [
'$sce',
function ($sce) {
return {
scope: {
location: '=',
},
res
浏览 2提问于2021-04-25得票数 0
下面是我的请求，我使用指令试图生成上面的结构：
<div class='myClass'>
<input id="id0" name="name0" type="radio" checked>
<label for="id0" ng-click="myAction('0')"> 0</label>
<input id="id1" name="name1" type="
浏览 1提问于2013-06-02得票数 1
回答已采纳
我有一个表，其中的行通过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
回答已采纳
我对Angularjs非常陌生，并且尝试在另一个指令中实现一个指令。我有一个处理基本输入事件的子指令basetext和处理与输入相关的其他任务的myTextbox。我制作了一个来演示我的问题。我已经实施了
在html中
<div my-textbox placeholder="'Input the value'" caption="Name:"></div>
在myTextbox指令模板函数中：
template: function (elem, attrs) {
return ("<labe
浏览 3提问于2015-11-02得票数 3
回答已采纳
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
回答已采纳
2回答
我有指令container和item。
directive('container', function(){
return {
replace: true,
template: "<div>contains <p>...</p> </div>'
}
});
directive('item', function(){
return {
replace: true,
template: "item"
浏览 0提问于2014-05-14得票数 0
回答已采纳
2回答
以前有一个replace-property，用于角中的指令，现在不推荐它了。
angular.module('myModule')
.directive('myDirective', myDirectiveCtrl);
function myDirectiveCtrl() {
return {
'restrict': 'A',
'scope': false,
'replace': true,
'template
浏览 4提问于2016-01-08得票数 2
回答已采纳
5回答
当作用域在指令上继承时，我可以让ng单击来工作，而不是当孤立时。UPDATE: The point is that I want the click function to be defined as part of the directive... moving the function definition into a different scope is not what I want.
下面是带有继承作用域的工作示例：
下面是带有孤立作用域的坏示例；
(单击数字，它们在第一个示例中增加，而在第二个示例中不增加)
一些密码..。
HTML
<div ng-app="myA
浏览 7提问于2016-10-14得票数 5
回答已采纳
假设我有一个简单的循环
<div ng-repeat="item in items">{{item.foo}}<br></div>
或
<div ng-repeat="item in items" ui-view="itemView"></div>
如何避免呈现定义标记(div)以获得：
Foo 1<br>
Foo 2<br>
Foo 3<br>
而不是：
<div>Foo 1<br></div>
<div&g
浏览 2提问于2014-12-22得票数 0
回答已采纳
1回答
我有一个情况，一个按钮是提供给用户点击。单击该按钮后，将创建一个新的<div> (实际上是一个具有独立作用域的模板)，并将此<div>附加到现有元素，如下所示：
<button ng-click="openNewDiv()"></button>
<div>Div content for DIV 1</div>
<div>Div content for DIV 2</div>
<div>Div content for DIV 3</div>
<div>
浏览 2提问于2015-08-06得票数 0
回答已采纳
我用的是角手风琴指令。不幸的是，输入字段值中的模型无法在指令之外公开或显示。不太确定哪一部分是错的。
Fiddler链接： Html
<body ng-app="btst">
<h3>BootStrap Accordion Directives</h3>
<form>
<pre>{{ form | json }}</pre> <!-- Not Working -->
<btst-accordion>
<btst-pane title=&
浏览 2提问于2016-04-27得票数 1
回答已采纳
我有一个AngularJS指令，用于与服务器推送的通知进行交互。我遇到的问题是，目前我使用的方法是有一个ng-重复，它跟踪会话期间的所有通知，然后在将它们添加到数组时显示它们。我想要发生的是，一个警报出现了，它被添加到DOM中，它停留了几秒钟，并从DOM中删除了自己。此时，问题是元素将隐藏，但它不会将自身从DOM中删除。因为元素是绝对定位的，在fadeout是阻止我访问它前面的项之后。我假设element.remove()和element.$destroy()会起作用，但似乎元素不是来自ng-repeat，也可能是指令的$scope没有被删除。任何帮助都将不胜感激。
angular.mod
浏览 6提问于2016-02-19得票数 1
回答已采纳
3回答
我正在尝试用角度指令构建一个日历。
我有以下指令，非常有效：
angular.module('acDaySelectCalendar',[])
.directive('acMonth', function () {
return {
template: '<div class="monthcontainer"><table class="calendarmonth" width="210" border="0" align="cente
浏览 0提问于2015-05-18得票数 2
回答已采纳
有人能解释一下这是什么意思吗：
replace: true / false
和
transclude: true / false
在angularjs指令中？
我确实阅读了文档，但可以100%理解它。
浏览 1提问于2014-11-21得票数 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
当我使用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
我正在处理动态内容，我使用带有自定义指令的ngTemplateOutlet来创建它，但是现在需要访问创建的内容元素。在类似的问题列表中，我无法找到与我的问题有关的任何相关答案。
我的当前设置(我将省略不必要的部分，以使示例尽可能清楚)
内容主机组件：
(grid.host.component.ts)
@ContentChildren(VvsGridInputCellDirective, { descendants: false }) public inputCols: QueryList<VvsGridInputCellDirective<T>>;
public ge
浏览 3提问于2020-04-10得票数 2
回答已采纳
我有一个简单的指令，在视图上呈现一个select字段。我知道下面的错误。
当我删除“替换:真”时，效果很好。
Error: $compile:multidir
Multiple Directive Resource Contention
Multiple directives [ngModel, ngModel] asking for 'ngModel on: {5}
以下是代码：
(function () {
function YesNoDecline($timeout) {
return {
restrict: 'E',
浏览 3提问于2017-04-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
