Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用AngularJS特性在一个div中插入多个div(即某种多元素模板)

如何使用AngularJS特性在一个div中插入多个div(即某种多元素模板)
EN

Stack Overflow用户
提问于 2013-06-04 08:25:56
回答 1查看 250关注 0票数 0

在我的AngularJS应用程序中,我想发出某种指令,将多个HTML元素插入到一个HTML元素中。

基本上,我希望Angular构建这个结果:

代码语言:javascript
运行
AI代码解释
复制
<div class="maindiv">
    <!-- Below are some divs common to all "maindiv" -->
    <div> ..XXX.. </div>
    <div> ..YYY.. </div>

    <!-- Below are some elements specific to maindiv1 -->
    <div> ..ABCD.. </div>
    <div> ..EFGH.. </div>
    <div> ..IJKL.. </div>
</div>

<div class="maindiv">
    <!-- Below are some divs common to all "maindiv" -->
    <div> ..XXX.. </div>
    <div> ..YYY.. </div>

    <!-- Below are some elements specific to this particular maindiv -->
    <div> ..1235.. </div>
    <div> ..5678.. </div>
</div>

..。来自如下所示的HTML:

代码语言:javascript
运行
AI代码解释
复制
<div class="maindiv" generate-common-stuff>
    <!-- Below are some elements specific to maindiv1 -->
    <div> ..ABCD.. </div>
    <div> ..EFGH.. </div>
    <div> ..IJKL.. </div>
</div>

<div class="maindiv" generate-common-stuff>
    <!-- Below are some elements specific to this particular maindiv -->
    <div> ..1235.. </div>
    <div> ..5678.. </div>
</div>

..。或者像这样:

代码语言:javascript
运行
AI代码解释
复制
<div class="maindiv">
    <generate-common-stuff></generate-common-stuff>

    <!-- Below are some elements specific to maindiv1 -->   
    ...

当我尝试创建自己的指令时,Angular抱怨我的模板中有多个根元素。

请注意,由于与其他库(JQueryMobile)不兼容,我无法在div下重新组合<div> ..XXX.. </div><div> ..YYY.. </div>并在模板中使用它。它们必须恰好插入在maindiv下面

你有关于如何实现它的想法吗?

EN

回答 1

Stack Overflow用户

发布于 2013-06-04 08:38:19

尝试编写一个名为generate-stuff的指令,并将commonspecific内容作为从作用域绑定的属性进行传递。

代码语言:javascript
运行
AI代码解释
复制
<generate-stuff common="commonStuffInScope" specific="specificStuffInScope"></generate-stuff>

指令中的...and

代码语言:javascript
运行
AI代码解释
复制
myModule.directive('', function() {
  return {
    ...
    scope: {
      common: "=common",
      specific: "=specific"
    }
    ...
  };
});

因此,在link函数中,您可以双向绑定到作用域上的公共变量和特定变量。

相关文档片段:http://docs.angularjs.org/guide/directive#directivedefinitionobject

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16913019

复制
相关文章
JavaScript prototype属性与修改对象
================================================================================
阳光岛主
2019/02/19
1.4K0
JavaScript OOP(三):prototype原型对象(即构造函数的prototype属性)
通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法);造成了一定的资源浪费 1 function Obj(name,age){ 2 this.name=name; 3 this.age=age; 4 this.func=function(){ 5 return 'this is a test function'; 6 }; 7 } 8 var o1=new Obj('小明',10); 9 var o
用户1149564
2018/01/11
1.1K0
JavaScript OOP(三):prototype原型对象(即构造函数的prototype属性)
JavaScript prototype(原型对象)
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。
陈不成i
2021/07/20
3090
JavaScript—网络编程(3)-Object、String、Array对象和prototype属性[通俗易懂]
参数 obj 必选项。要赋值为 Object 对象的变量名。 value 可选项。任意一种 JScript 基本数据类型。(Number、Boolean、或 String。)如果 value 为一个对象,返回不作改动的该对象。如果 value 为 null、undefined,或者没有给出,则产生没有内容的对象。 说明 Object 对象被包含在所有其它 JScript 对象中;在所有其它对象中它的方法和属性都是可用的。在用户定义的对象中可以重定义这些方法,并在适当的时候通过 JScript 调用。toString 方法是经常被重定义的 Object 方法的例子。
全栈程序员站长
2022/08/25
3870
JavaScript—网络编程(3)-Object、String、Array对象和prototype属性[通俗易懂]
JavaScript---网络编程(3)-Object、String、Array对象和prototype属性
参数 obj 必选项。要赋值为 Object 对象的变量名。 value 可选项。任意一种 JScript 基本数据类型。(Number、Boolean、或 String。)如果 value 为一个对象,返回不作改动的该对象。如果 value 为 null、undefined,或者没有给出,则产生没有内容的对象。 说明 Object 对象被包含在所有其它 JScript 对象中;在所有其它对象中它的方法和属性都是可用的。在用户定义的对象中可以重定义这些方法,并在适当的时候通过 JScript 调用。toString 方法是经常被重定义的 Object 方法的例子。
谙忆
2021/01/21
4170
JavaScript---网络编程(3)-Object、String、Array对象和prototype属性
在 JavaScript 中,对象是拥有属性和方法的数据
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。 在 JavaScript 中,对象是拥有属性和方法的数据。
用户1503405
2021/10/08
4K0
「转」javascript中的prototype
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例。但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于‘类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的。但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让原型对象的写法更加清晰、更像面向对象编程的语法而已。
音视频_李超
2020/04/01
6050
「转」javascript中的prototype
JavaScript中prototype用法
大部分面向对象的编程语言,都是以类class作为对象的基础语法,js语言不是如此,它的面向对象编程基于‘原型对象’。
全栈程序员站长
2022/09/15
5080
JavaScript——对象的属性
在JavaScript中,所有的对象都是一组属性的集合,属性可以是数值,字符串等原始类型,也可以是函数,或者是其他对象。
Html5知典
2019/11/26
2.7K0
如何遍历JavaScript中对象属性
在2016年6月发布的ECMAScript 2016的同一时期,令JavaScript开发人员开心的是知道另一组很棒的提案已经达到了第4阶段(完成)。
疯狂的技术宅
2019/03/27
3.9K0
如何遍历JavaScript中对象属性
理解Python中的类对象、实例对象、属性、方法
class Animal(object): # 类对象 age = 0 # 公有类属性 __like = None # 私有类属性 def __init__(self): # 魔法方法 self.name = 'haha' # 公有实例属性 self.__sex = 'man' # 私有实例属性 def smile(self): # 公有方法 self指向实例对象 pass def __jump(
汪凡
2018/05/29
4.2K0
如何从JavaScript对象中删除属性?
在使用 JavaScript 中的对象时,你可能会遇到需要从对象中完全删除属性的情况。为实现这一点可以有好几个选择:
疯狂的技术宅
2021/04/01
13.5K0
在JavaScript中,如何创建一个数组或对象?
1:使用数组字面量(Array Literal)语法,使用方括号 [] 包裹元素,并用逗号分隔:
王小婷
2023/10/23
9820
在JavaScript中,如何创建一个数组或对象?
JavaScript 中的 __proto__ 和 prototype
当你创建函数时,JS会为这个函数自动添加prototype属性,值是空对象。而一旦你把这个函数当作构造函数(constructor)调用(即通过new关键字调用),那么JS就会帮你创建该构造函数的实例,实例继承构造函数prototype的所有属性和方法(实例通过设置自己的__proto__指向承构造函数的prototype来实现这种继承)。
上山打老虎了
2022/06/14
4020
JavaScript 中的 __proto__ 和 prototype
JavaScript移除对象中不必要的属性
业务开发中,我们经常会遇到:基于后端返回接口数据,前端保存到对象 Object 中,前端开发过程中为了一些场景的便利性,需要在该对象中增加相应的属性,但这些属性对于后端没有意义,保存提交时希望删除掉。
奋飛
2021/12/30
1.9K0
JavaScript移除对象中不必要的属性
JavaScript移除对象中不必要的属性
业务开发中,我们经常会遇到:基于后端返回接口数据,前端保存到对象 Object 中,前端开发过程中为了一些场景的便利性,需要在该对象中增加相应的属性,但这些属性对于后端没有意义,保存提交时希望删除掉。
奋飛
2021/10/25
2.3K0
JavaScript中为何要使用prototype
在JavaScript学习和工作中,或多或少会接触一些底层的JavaScript知识。比如下面四个基本概念:
八哥
2022/05/11
3490
Javascript类函数中prototype与this的区别
通过this与prototype定义的方法有什么区别呢? 运行以上代码可以发现,showName方法可以访问类函数中的定义的变量与方法,而protoFunction只能访问showName方法。 如果将protoFunctionin定义在构造函数内部,就可以访问这些属性和方法了。但作为实例函数,如果定义在构造函数内部,每次实例化都要执行,显然在浪费内存,也不合理。 有些资料上把this.showName这类方法叫做特权方法,主要是为了访问内部的私有字段,这样就可以控制对某些字段的访问。 而protoFunction这类方法相当于类的实例方法,但能访问这些特权方法,间接访问私有字段。
用户2936342
2018/08/27
9240
java中对象属性可以是另外一个对象或对象的参考
System.out.println("往上转一下把套,发动.........");
马克java社区
2021/03/15
1.3K0
java中对象属性可以是另外一个对象或对象的参考
在 JavaScript 中如何克隆对象?
我们假设一个变量 name 具有一个与之关联的原始值(number,string,boolean,undefined 和null)。 如果我们将此变量 name 复制到另一个变量name2 ,则原始变量的任何修改都不会影响到第二个变量,因为它们是原始值。
前端小智@大迁世界
2022/06/15
5.1K0

相似问题

为什么prototype的属性不在javascript对象中显示为portoype属性?

15

Javascript -在构造函数或构造函数的prototype属性中设置属性?

20

使用Prototype遍历javascript中对象的每个属性?

30

JavaScript对象文字属性范围

34

javascript prototype属性

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档