无法操作模板中的DOM来添加/删除属性
无法操作模板中的DOM来添加/删除属性是因为模板是一种静态的数据结构，无法直接修改它的属性。模板一般是在前端开发中使用的一种定义页面结构和样式的标记语言，比如HTML、XML、Mustache、Handlebars等。
在前端开发中，我们通常使用模板引擎来将数据和模板进行结合，生成最终的页面。模板引擎会将模板中的占位符替换为具体的数据，然后生成渲染后的页面。但是在这个过程中，模板的结构和属性是不可变的，无法通过操作模板来添加或删除属性。
如果需要在页面渲染完成后动态添加或删除DOM元素的属性，可以通过JavaScript来操作DOM。DOM（Document Object Model）是一种将HTML或XML文档表示为树形结构的API，可以通过JavaScript来访问和操作DOM元素。
要动态添加属性，可以使用setAttribute方法，例如：
var element = document.getElementById('myElement');
element.setAttribute('data-attribute', 'value');要动态删除属性，可以使用removeAttribute方法，例如：
var element = document.getElementById('myElement');
element.removeAttribute('data-attribute');在以上代码中，通过getElementById方法获取到页面中的元素，并使用setAttribute或removeAttribute方法来动态添加或删除属性。这样可以实现对DOM元素的属性进行操作。
在云计算领域中，模板通常用于配置部署云上的资源或应用，如云服务器、数据库、存储等。在腾讯云中，可以使用Terraform来定义和管理基础设施资源，以及配置云服务器的属性。Terraform是一种基础设施即代码工具，可以通过编写配置文件来描述云资源的定义和配置，然后使用Terraform命令进行部署和管理。
关于Terraform的更多信息，请参考腾讯云产品介绍页面：Terraform
总结：无法直接操作模板中的DOM来添加/删除属性，但可以通过JavaScript来操作DOM元素，动态添加或删除属性。在云计算领域中，可以使用Terraform等工具来定义和管理云上资源的配置。
相关·内容
到目前为止，我理解的是“指令被用来简化DOM操作”。现在出现了AngularJS中的编译和链接函数。我读过关于这些主题的文章，但我无法理解使用什么的背后情况。
纠正我，如果我错了，，让我把我的理解也放在这里。当我们只想在DOM中附加一些元素时，我们使用编译函数。让我们来看看，我想动态地向我的div中添加5 li，我将使用编译函数。当我想为这些li附加一些事件侦听器时，我会使用链接函数。
有谁能告诉我这两种功能的的实际区别/使用与jQuery相比。
浏览 0提问于2013-10-02得票数 1
1回答
在这种情况下，我通过web套接字获取数据，性能非常重要。从文档中我了解到，有各种方法可以将我收到的数据“推送”给我的聚合物元素，但我很好奇哪一种方法最有效。到目前为止，我已经创建了一个可以包含在模板中的元素，其中父元素将观察data属性中的任何更改并做出相应的反应。我也尝试过使用一种行为来完成同样的事情，尽管它不需要在模板中包含一个"data-element"，它只需要观察它自己的数据属性。我意识到，我也可以使用类似iron-signals的东西通过事件“推送”数据。
我不确定这些方法是否非常有效，因为大多数情况下，对"data“对象的更改只适用于所有观察者中的一小部分
浏览 2提问于2015-10-26得票数 1
回答已采纳
在下面的代码中，当我试图访问全局变量时，它返回未定义的。如何更新变量以使其可用于另一个函数？
episodes: EpisodeModel[] = [];
ngAfterViewInit(): void {
this.episodesService.getAllEpisodes().subscribe(data => {
this.episodes = data;
console.log(this.episodes); // shows array
this.showEpisodes(); // function to displ
浏览 42提问于2019-04-15得票数 -1
回答已采纳
3回答
ng-show的聚合物等效吗？下面是我试图转换的一个简短的例子：
<h1>Greeting</h1>
<div ng-show="authenticated">
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</div>
<div ng-show="!authenticated">
浏览 5提问于2016-08-17得票数 3
回答已采纳
3回答
流星js未渲染钩？
、、、
当我添加模板时，我喜欢使用Meteor的呈现钩子作为入口动画。下面是一个例子：
在我的模板中：
<template name="main">
{{#each people}}
{{>person}}
{{/each}}
</template>
<template name="person">
<li> {{name}} </li>
</template>
在我的javascript文件中：
//in js file
Template.perso
浏览 1提问于2014-11-09得票数 0
回答已采纳
我在尝试将一款软件从Knockout.js转换为Angular.js时遇到了一个小问题
假设我有以下从数据库返回的数据：
{
id: "Some ID",
title: "Some Template",
fields: [
{type: "radio", title="Some Title", description: "Some Description},
{type: "textbox", title="Some Title", d
浏览 0提问于2013-03-22得票数 0
回答已采纳
我有一个由Django模板标记呈现的HTML表单，我想使用AngularJS来操作它。
在我的模板(未呈现)中，我有：
<html>
<body>
{{ form.as_p }}
</body>
</html>
Django是这样呈现这个模板的：
<html>
<body>
<form>
<div id="div_id_street" class="ctrlHolder ">
<labe
浏览 9提问于2013-01-31得票数 1
回答已采纳
1回答
假设我们有以下指令：
app.directive('foo', function() {
return {
restrict: 'E',
scope: { prop: '=' },
template: '<h1>{{prop}}</h1>'
};
});
说，可以使用一次绑定和双向绑定，如下所示：
<foo prop="::someProperty"></foo>
如果someProperty稍后更改，则foo指令将不知道这一点。
现在
浏览 3提问于2015-04-10得票数 1
回答已采纳
为什么模板div在afterRender中显示为":hidden“？
代码如下：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/jquery.tmpl.js"></script>
<script src="js/knockout-1.2.1.debug.js"
浏览 2提问于2011-06-02得票数 0
1回答
学习自定义插件，我正在尝试测试一个虚拟DOM
import Vue from 'vue'
import MyPlugin from '@/plugins/MyPlugin'
Vue.use(MyPlugin)
describe('MyPlugin', () => {
let vm
beforeEach(() => {
vm = new Vue({
template: '<div id="app" class="container" v-demo:hello
浏览 0提问于2017-10-03得票数 1
回答已采纳
当我将send_random()作为指令添加到新添加的DOM中时，它无法工作。
...
for (let i = 0; i < items.length; i++) {
data = `
<div class = "block received">
<span class = "item-text">
<butto
浏览 5提问于2022-08-24得票数 2
我一直在角应用程序中使用jQuery UI小部件。我在Stack溢出上看到，许多经验丰富的开发人员建议每个人避免使用带有角的jQuery。虽然经过大量的努力，我还是能够使这个小部件与角形应用程序兼容，但我心里还是有一些疑问。
我在关于堆栈溢出的许多答案中看到，我们应该在ngAfterViewInit()方法中使用小部件初始化和其他ngAfterViewInit代码。但是，即使在研究了的定义之后，也就是
在组件的视图被完全初始化之后调用的生命周期挂钩。
到目前为止，我还无法理解为什么在jQuery方法中使用ngAfterViewInit代码。我使用selectMenu jQuery UI
浏览 1提问于2018-01-08得票数 2
在过去的两个星期里，我一直在构建一个Meteor项目，我希望从使用Meteor并与之斗争的人那里得到一些关于负载顺序的想法。
拿出这个模板：
所有重要的javascript文件都在index.html底部引用。如果您尝试将其移植到一个Meteor项目中，那么祝您好运，所有的效果和动画都能工作，特别是在main.js中。
简单地将脚本标记留在底部意味着大量的javascript和jQuery动画无法工作，因为在Meteor中，JS文件完全可以在DOM全部加载之前加载。这破坏了很多东西。
使用Meteor，任何名为main.*的文件都将在其他所有内容之后加载。
请注意，这似乎只意
浏览 2提问于2014-05-13得票数 1
2回答
控制器中的部分代码删除DOM元素：
MetrofficeApp.controller('EmployeesCtrl', function($scope) {
...
angular.element(deleteElem).remove();
$scope.$apply();
当我使用角从这个页面导航，然后返回到删除元素所在的同一个页面时，元素再次可见，。
除了$scope.$apply()之外，我还必须做什么才能使导航页面之间的更改永久化(保存DOM更改)？
浏览 3提问于2014-07-31得票数 0
回答已采纳
下面是我的代码，我省略了缩写的组件代码：
template.html
...
<tr *ngFor="let item of getProducts(); let i = index"
[pa-attr]="getProducts().length < 6 ? 'bg-success' : 'bg-warning'">
<td>{{item.name}}</td>
</tr>
下面是自定义属性指令代码：
@Directive(
浏览 2提问于2019-10-24得票数 1
回答已采纳
1回答
我试图从domReady中的脚本修改我的聚合物模板元素的DOM。在主模板中一切工作正常，我可以使用this.$.xxx访问元素。但是如果我想访问的元素在嵌套模板中，我就不能再访问它了。
我认为使用this.$.myTemplate.content.querySelector可以工作(就像它在标准get组件应用程序中一样)，但我不能让它与聚合物一起工作
这并不容易解释，但如果你能打开我的柱塞，你就会明白我在做什么。
谢谢你的帮忙!
<!DOCTYPE html>
<html>
<head>
<script data-require="
浏览 0提问于2015-02-16得票数 1
我们的团队正在构建我们的第一个聚合物都在一个页面上的应用程序，我们不得不对项目中被忽视的部分进行逆向工程。我们需要为core-scaffolding中的标题栏设置标题。使用JS在简单的页面上很容易做到这一点，但是一些页面具有显示内容的条件模板，每个页面都需要自己的标题。
例如
<core-scaffolding>
<div id="title">Dynamic Title goes here</div>
<core-animated-pages transitions="cross-fade">
<sec
浏览 2提问于2015-06-21得票数 1
我使用的是Vue.js，并且我希望在调用Vue构造函数之前隐藏元素，否则会向用户显示一堆花括号。我有以下几点：
HTML：
<div class="main hide-me" id="my-vue-element">
<!-- stuff -->
</div>
CSS：
.hide-me {
display: none !important;
}
JavaScript：
var myVueElement = document.getElementById("my-vue-element");
浏览 1提问于2019-01-19得票数 1
我想通过<li>将<ul>标记添加到JavaScript：
const newLI = document.createElement("LI");
const ul = document.getElementById("tag_list");
ul.appendChild(newLI);
newLI.innerHTML = "<a href=\"dddaaaa\">" + json + "</a>";
<template id="box#add-f
浏览 1提问于2013-04-22得票数 2
回答已采纳
1回答
Angular6 -引用隐藏元素
、、、、
我有一个场景，我正在使用一个嵌入在我的html模板中的组件，我希望它被隐藏，直到复选框。但是，有一个条件可以确定"showControl“是否设置为true .条件是通过在控件上调用一个方法来确定的(这里是鸡和蛋场景)。
html如下：
<input type="checkbox" (click)="clickBox()" />
<div *ngIf="showControl">
<app-sample #appsampleref></app-sample>
</div>
浏览 0提问于2018-06-20得票数 1
回答已采纳
当输入值发生变化时，我的目标是将v-text字段组件的颜色更改为不同的颜色。
我尝试在vuetify控制器中使用@change，但它只传递事件中的文本值，因此我无法将任何额外的类绑定到实际组件。
显然，我可以为每个特定控件提供布尔值，并让每个@change分别访问这些控件，但我希望有一种更可重用/更通用的方法来实现这一点。
<template>
<v-text-field
label="Project"
@changed="updateBackground"
></v-text-field>
</
浏览 1提问于2019-07-31得票数 1
回答已采纳
我的印象是slot取代了replaceable，但有人告诉我，replaceable在1.0版中被重新引入了，是真的吗？
浏览 4提问于2016-08-08得票数 1
回答已采纳
我有一个数组，并使用它的ngFor创建一些html元素。我的问题是在添加新成员后添加新成员到我的数组和更新html部分。
html部分：
<div *ngFor="let member of members">
<span>{{member}}</span>
</div>
ts部分：
let members: string[] = ['a','b','c','d'];
在呈现html部分之后，在应用程序中的某个位置，我向数组中添加了e元素，但我的html部分不会更
浏览 0提问于2019-08-07得票数 2
回答已采纳
3回答
在DOM中存储数据
、、、
我有一个书的列表，我想存储每本书的数据，例如价格，数量，id，分类id，大小，重量等。
我正在考虑通过使用data- attribute扩展表示列表中每本书的li元素来将所有这些内容存储在dom中。然后，可以通过javascript直接使用该数据。
然而，我读到访问数据属性在性能上是很慢的。此外，我可能会有同一本书的多个实例，所以我有点担心html中的膨胀。
另一种方法是使用JS对象来存储每本书的数据。
所以我的问题是，在前端存储数据的最佳实践是DOM还是Javscript？
提前感谢
浏览 1提问于2013-01-14得票数 5
我正在开发一个音乐应用程序，它的urls格式为my-app.com/[0-9]{10}，如下所示：
my-app.com/0123456789
my-app.com/1293938388
它们中的每一个都是一首歌曲、一个播放列表或一个用户页面，我可以查询后端来找出是哪一个。但是，由于不查询数据库就无法区分这些$routeProvider.when('route-prefix/:routeArgument')，所以我不能使用普通的URL来为每个URL实例化不同的部分。
我希望能够指定一个默认的处理程序，它显示一个微调程序并查询数据库，然后根据响应的类型包括许多部分中的一个和许多控
浏览 0提问于2013-03-22得票数 0
回答已采纳
$scope.templateDOM = templatePath;
<div id="Template" ng-include="templateDOM"></div>
场景
我已经在作用域中添加了templatePath。
在添加templatePath之后，能够在页面中看到templateDOM。
现在从页面templateDOM中删除jQuery("#templateDOM").remove();。
我再次尝试执行$scope.templateDOM = templatePath;这个逻辑。
浏览 6提问于2017-06-23得票数 2
2回答
我读过几篇关于这个主题的文章，但在最初从远程数据服务器加载数据之后，仍然无法获得通过ng-include加载到重新加载的数据。
(例如 )
我有一个GSP页面，它呈现选项的下拉菜单，当选择一个选项时，ng-包括调用远程服务器并显示数据(在ng网格中)。因此，ng-include需要URL中远程服务器的完整路径。此代码在使用第一次使用选项时正确工作，但不会在随后的选择中重新加载数据。我知道Angularjs正在缓存数据，但我需要强制它重新加载。在"myTabController“中是否有我能捕捉到的事件来强制它调用ng-include？可以禁用缓存吗？由于不可能将Angularjs的参数
浏览 9提问于2015-12-17得票数 0
回答已采纳
1回答
我很难理解ui路由器是如何工作的。试图添加一个导航到我的应用程序，显示/隐藏时，一个按钮被点击。
.state('now', {
url: '/now',
views: {
'content': {
templateUrl: 'views/now',
controller: 'MyCtrl'
},
'navigation': {
templateUrl: 'views/navigation.html',
浏览 1提问于2014-01-24得票数 2
回答已采纳
这是我的模板：
<div *ngFor="let d of data; let i=index">
<select [(ngModel)]="d.dob" name="dob-{{i}}">
<option *ngFor="let d of [1990, 1991, 1992]">
{{d}}
</option>
</select>
<i cla
浏览 1提问于2017-10-06得票数 1
回答已采纳
3回答
正如标题所述，我想向元素添加一个新的隐藏属性。为了避免任何混淆，我希望隐藏属性，而不是元素。
我有一个div：<div id="hello_div">Hello!</div>
我添加了一个属性：$('#hello_div').attr('my_attr', 'attr_value');
所以我可以晚些时候得到它：var v = $('#hello_div').attr('my_attr');
它按预期工作，但如果您检查DOM资源管理器中的div，您会看到：
<div i
浏览 4提问于2015-06-02得票数 0
回答已采纳
1回答
在knockoutjs中使用html绑定时，我遇到了一个问题。在viewModel.maintable()中，我有：
this.layerDetails = ko.observable("");
在我在上面的属性中添加一些html的函数中：
viewModel.maintable().layerDetails(viewModel.maintable().layerDetails() + "<a href='#' data-bind='click:function(){viewModel.refreshPage(true)}'>
浏览 2提问于2011-06-28得票数 4
回答已采纳
10回答
@Component和@Directive在角度上有什么区别？他们两人的任务似乎是一样的，属性也是一样的。
用例是什么?什么时候更喜欢用用例？
浏览 16提问于2015-09-20得票数 538
回答已采纳
2回答
我有一个dom-repeat模板(聚合物1.2.3)，并希望它渲染元素取决于模型。
根据item中的值，模板应该呈现一个按钮、一个复选框或其他事先不知道的东西。这是我尝试过的：
<template is="dom-repeat" items=[[myItems]]>
<div>[[_render(item)]]</div>
</template>
_render函数在这里返回一个DOM元素，但这并不能正常工作(如预期的那样)。
_render: function() {
return document.create
浏览 0提问于2016-01-10得票数 0
我有一个ng-repeat，它列出了用户并使用了一个自定义指令。
我的自定义指令有一些事件处理程序，比如点击处理程序等。
每次在UI中更改下拉列表值时，都会修改此vm.UserList。我的问题是，当下拉列表修改UserList时，事件处理程序会更新吗？
dropdownlist on change将发出一个远程API请求，然后将用户的JSON结果设置为UserList的值。
<div ng-repeat="u in vm.UserList">
<div><div my-custom-directive user-id="{u.id
浏览 2提问于2018-02-14得票数 0
2回答
我知道如果我们在Vue实例中直接使用JQuery插件，它将无法工作。
这就是为什么我们使用包装组件。
我想知道的是为什么它不能工作？
是因为Vue切断了元素和插件之间的绑定吗？
如果是，是否发生在Vue生命周期的特定部分？
以JQuery日期选择器为例，我试图看看在生命周期中是否发生了一些变化，我想可能会有一些东西被覆盖，但最终我什么也没有发现.
有人能解释Vue和第三方图书馆冲突的机制吗？谢谢..。
console.log($('#date-picker'));
console.log(document.getElementById('date-picker&
浏览 2提问于2017-12-11得票数 0
回答已采纳
我使用的是Laravel 7和Vue.js 2。
我希望将验证错误的对象从axios调用的catch块传递给父组件，但由于某些原因，它无法工作。
这是axios调用的代码：
runReport: function() {
let self = this;
const url = "api/get_report?room="+this.formReport['room']+"&participant="+this.formReport['participant'
浏览 2提问于2021-01-02得票数 1
回答已采纳
2回答
我试图构建呈现JSON对象集合的通用web组件，比如树视图和多列表视图(在两个列表之间移动项目)。我想复制铁列表使用的模式，其中包含单个项目表示的模板被传递到组件中以供重用。
例如，给定这个web组件模板：
<dom-module id="intworkspace-tree">
<template>
<style include="iron-flex iron-flex-alignment">
paper-icon-item {
--paper-item-min-height:
浏览 1提问于2017-05-22得票数 7
回答已采纳
1回答
不突出的淘汰赛模板问题
、、、、
我一直在试验一个低调的淘汰制数据绑定jQuery插件。按照链接。
不过，我似乎想不出如何将“数据绑定”属性排除在模板之外。我也无法决定是否应该这样做。我只是有预感。
示例模板：
<script id="storeTemplate" type="text/x-jquery-tmpl">
<li>
<div class="storeTitle" data-bind="click: select">${storeTitle}</div>
</li>
浏览 0提问于2011-07-12得票数 1
回答已采纳
我有一个带有数据绑定的复选框列表的角形2反应性表单。这很好，但是现在我需要添加一个按钮来检查所有的复选框。
下面是如何配置我的FormGroup：
private buildForm() {
this.groupForm = this._formBuilder.group({
bookId: this._formBuilder.control(null),
startDate: this._formBuilder.control(null),
groupTotal: this._formBuilder.control(null),
c
浏览 2提问于2017-08-18得票数 7
回答已采纳
2回答
有点棱角分明的新手！在我们的Angular应用程序中，我们有一系列不同高度的div需要测量到像素，所以当div的测量值达到一个特定值时，比如每1000px，它会自动插入一个新的div来充当分页符，并将原始div系列强制到1000px的下一个“页面”。在javascript中，获取高度很容易实现，但据我所知，脚本无法正确地与angular应用程序对话来实现此功能。我知道angular可能需要渲染div两次(最初是一次，获取高度，然后再渲染一次)，但老实说，我不确定该怎么做。
有没有人有任何关于如何可能使其工作的建议？谢谢!
示例：
<div class="original"
浏览 11提问于2018-02-03得票数 1
回答已采纳
1回答
你好，首先我必须说对不起，但我不知道如何更好地表达这个问题，这也是我找不到答案的原因。
我说的是如何在另一个组件中加载一个组件，我需要在指令中指明它。下面是我从头到尾做的一个非常小的例子，因为我找不到正确的语法：
import {Component} from 'angular2/core'
import {Prueba} from './prueba'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2&
浏览 0提问于2016-03-31得票数 2
回答已采纳
1回答
我有一个有序的列表，我想设置条件，以便列表中的项目可以排序或不排序。
如果条件$root.userPermissionsList().write()为真，则排序列表将是可排序的：
<ol class="timeline Question"
data-bind=" sortable: {data: questions, afterAdd: $root.focusQuestion}">
相反，如果
!($root.userPermissionsList().write())
则排序列表将不可排序：
<ol class="timel
浏览 1提问于2016-03-22得票数 1
回答已采纳
我注意到在没有索引的情况下，jQuery中的className属性不起作用，为什么？
此外，在jQuery中是否还有其他常见的JS属性/方法无法按预期工作？
HTML：
<div class="par">test</div>
JQuery：
$(function () {
var el = $('.par');
el.className += ' new class'; // doesn't work
el[0].className += ' new class'; //
浏览 0提问于2013-05-17得票数 2
回答已采纳
这里是AngularJS新闻，有很多问题。
请问在指令中编写的函数与在控制器中编写的函数之间到底有什么区别？
例如，在这个指令片段中：
link: function(scope, element, attrs) {
scope.hideModal = function () {
console.log("hide modal fxn called");
scope.show = false;
};
浏览 3提问于2016-07-18得票数 0
回答已采纳
几周前，我像往常一样更新了Qubes。重新启动后；
Debian 8实例运行和工作，包括模板。
我打开的任何应用程序都开始打开，我看到一个“弹跳”图标，就像窗口即将加载一样，然后它就消失了。
这发生在所有应用程序中，在所有情况下，包括模板本身。
我无法更新模板或实例，它们只挂起dom0和Qubes管理器。
任何建议都非常感谢，这个问题已经失去了我许多以前工作的VMS。
浏览 0提问于2016-12-26得票数 0
1回答
django模型管理对象允许您指定通过search_fields键进行搜索的字段，它们将显示为列表视图顶部的文本搜索框。
但是，我注意到这些字段没有列出maxlength属性，所以我想知道这是否是一个bug，或者是否有一种方法可以在这个字段上指定最大长度，这样我就不会得到太长的查询字符串。
我预计这些字段将被限制在所述字段的值的长度之内，但事实并非如此。
如何在列表视图中的search_fields输入上指定最大长度？
浏览 3提问于2015-08-01得票数 0
回答已采纳
4回答
我正在使用‘ng-重复’指令尝试一个简单的AngularJS循环，如下所示：
<div ng-app="" ng-init="numbers=[1,3,5,2]">
<ul>
<li ng-repeat="item in numbers">{{ item }}</li>
</ul>
</div>
这样做的结果如下，非常完美
1
3.
5
2
但是，当我像这样更改'numbers‘数组时
<div ng-app=&
浏览 11提问于2015-07-31得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
