我有一个自定义包含函数,可用于将html的特定部分移动到指令模板中的特定位置。 当前的包含功能虽然很棒,但局限性在于我只能将事物放到一个位置。 我有不同的作品需要去不同的领域。 这是我的设置:

<div ng-app="app">
    <div ng-controller="ParentCtrl">
        <div class="parentDirectiveRepeat" data-list="myList">
            <div data-transclude-ipsum>Ipsum</div>
        </div> 
        <hr>
        <div class="parentDirectiveNoRepeat" data-list="myList">
            <div data-transclude-ipsum>Ipsum</div>
        </div>
    </div>
</div>

这是我的两个指令模板:

parentDirectiveRepeat: <div>Parent Directive<div data-ng-repeat="item in list">repeater<div data-transclude-ipsum-destination></div></div></div>
parentDirectiveNoRepeat: <div>Parent Directive<div data-transclude-ipsum-destination></div></div>

两者之间的共同共享控制器:

function directiveController($scope, $element, $transclude, $compile){
    var ipsumDestination = angular.element($element[0].querySelectorAll("div[data-transclude-ipsum-destination]"));

    $transclude(function(clone){
        var ipsum = csFncFindElement(clone, "data-transclude-ipsum");
        ipsumDestination.append(ipsum);
    });   
}

所以,这是输出:

Parent Directive
repeater
repeater
repeater
-------------
Parent Directive
Ipsum

问题是输出应该确实是

Parent Directive
repeater
ipsum
repeater
ipsum
repeater
ipsum
-------------
Parent Directive
Ipsum

这是整个过程的jsFiddlehttp : //jsfiddle.net/uBsbC/1/

通过各种测试,我确定当我使用$ transclude函数时,data-ng-repeat已经连接并完成。 我有什么办法告诉它不要让孩子们挂起来,等到这个父指令通过之后?

  ask by Mathew Berg translate from so

本文未有回复,本站智能推荐:

2回复

如何在自定义指令中包含过滤器

我是Angular JS的新手,自定义指令遇到了麻烦。 我试图复制一个教程,但无法使用自己的代码来运行它。 这是我的HTML的相关部分: 首先,我只是试图将最后一段变成自定义指令。 这是我的尝试: 当插入如下代码时,这并没有给出我期望的HTML模板: 我的第一个问题
1回复

在自定义指令中引用包含字段集

我有一个使用画布的自定义签名指令。 我的脚手架如下: 有时会使用ngDisabled指令将该指令包装在包含的字段集中。 我希望能够引用该字段集,以便我知道何时启用/禁用该字段集以适当反映我的元素样式。 我试着在链接函数中引用表单控制器 但这不能给我我所需的信息。 有没有更
1回复

如何在角形式中包含自定义指令的输入字段?

我需要创建一个带有这样验证的简单表单 - https://jsfiddle.net/rohansh20/k7omkz7p/2/ 但我需要动态生成输入字段。 所以我制定了一个转换为任何类型的输入字段的指令 - https://jsfiddle.net/rohansh20/hdxj0np6
1回复

AngularJS在自定义指令中包含ui-select

我正在尝试将ui-select包装在自定义指令中。 ( https://github.com/angular-ui/ui-select ) 选择正常,但与ng-model的绑定不起作用。 我无法设置模型或阅读它。 我没有得到它,因为它使用一个简单的模板,如 有什么特别的事要
1回复

Angular中的自定义指令

您好汉堡包菜单有以下指令: 这是模板: 这就是我在视图中使用它的方式: 现在我在我的视图中有一个函数,它在单击时向元素添加一个类。 这会打开一个侧边菜单。 现在,当我的侧边菜单打开时,我想通过添加“打开”类来更改菜单的图标。 在我的指令中,我有一个名为“op
1回复

如何在角度js中将自定义指令包含到另一个自定义指令的模板(html)中

我已经有一个指令(appView),它具有一些可以通过templateUrl加载的html。 到目前为止,我需要向另一个指令(appView)所使用的模板中添加一个自定义指令。 请在下面查看我的代码,它无法正常工作。 请问对此有什么帮助吗? View.html(模板) 角
2回复

在自定义指令模板中调用自定义指令

我正在使用称为“牙齿”的有角度的自定义指令在HTML页面上创建多个画布元素。 我在牙齿指令中放置了另一个自定义指令'draw',我想在单击画布元素时调用'draw'指令。 我已经尝试过了,但是元素点击事件不起作用。 请给我建议一个解决方案。
1回复

自定义指令中的自定义指令不会触发

我有一个指令,该指令根据数据加载模板,现在当我加载模板时,它恰好在其中包含另一个指令,只是不呈现。 我尝试了优先级,覆盖,替换以及任何其他可能的切换,但均未成功。 任何想法为什么这可以在根html文件上工作,而在另一个指令中却不能工作? 这是矮人。 http://plnk
1回复

AngularJS:包含无法通过自定义指令运行

我有一个自定义指令,我想用它在单击文档后将html内容包含到文档中。 柱塞: http ://plnkr.co/edit/u2KUKU3WgVf637PGA9A1?p=preview JS: HTML: 不知道为什么它不起作用,因为在将其移入指令之前它可以正常工作。
1回复

使用angularJs包含指令和自定义标签

我正在尝试为网页中的可重用组件创建自定义标签,但是我所做的却没有用,所以我想我缺少了一些东西。 我想知道是否有人可以向我指出正确的方向。 HTML被命名为bottom-popular.html 并且js(指令+控制器)的名称为bottompopulardirective.js