代码之家 › 专栏 › 技术社区 › JasonStoltz

具有“元素”转换的角度模板

angularjs javascript

JasonStoltz · 技术社区 · 12 年前

给定指令“wrap input”:

scope: {},
transclude: 'element',
template: '<div>' +
          '<ng-transclude></ng-transclude>' +
          '</div>'

使用方式如下:

<input wrap-input></input>

我希望结果是,它按照模板将整个输入元素跨导并包装在一个div中。但它并没有,它只是在那里留下了一条评论,没有被修正。如何获得指令以将模板应用于已排除元素的位置?

预期:

<div>
  <input wrap-input></input>  
</div>

真实的

<!-- wrapInput:  -->

2 回复 | 直到 12 年前

runTarm 12 年前

为了使用 transclude: 'element' 随着 template 或 templateUrl ,您还必须设置 replace: true 看见 #3368 对于解释。

如果您想在某些兄弟之间放置transclude元素,则必须在link中使用transclude函数,而不是 ng-transclude 这样地:

.directive('wrapInput', function() {
  return {
    scope: {},
    transclude: 'element',
    replace: true,
    template: '<div>' +
        '<div>Sibling A</div>' + 
        '<div class="transclution-point"></div>' +
        '<div>Sibling B</div>' +
      '</div>',
    link: function (scope, element, attrs, controllers, transcludeFn) {
      transcludeFn(function (clone) {
        element.find('.transclution-point').replaceWith(clone);
      });
    }
  };
});

示例punker: http://plnkr.co/edit/tkMCZB6vxNOwSiLwYbkp?p=preview

TheSharpieOne 12 年前

您可以使用 wrap 角度开启元件提供的功能

link: function(scope, element, attributes){
    element.wrap('<div />');
}

小提琴: http://jsfiddle.net/fa54a/

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前