[英]Dynamically adding an attribute Directive to a transclude Directive in AngularJS
I'm attempting to dynamically add an attribute Directive to a transclude directive. 我正在尝试将属性指令动态添加到transclude指令。
For example, the template would start off as follows: 例如,模板将开始如下:
<div class="container">
<div ng-transclude></div>
</div>
After an event takes place (eg. a click), it would then have an attribute Directive added, such as: 事件发生后(例如,单击),它将添加一个Directive属性,例如:
<div class="container" some-directive>
<div ng-transclude></div>
</div>
I'm using the following JavaScript to do this: 我正在使用以下JavaScript来做到这一点:
div = angular.element("#demoParentDirective .container").clone();
div.attr('some-directive','');
div = $compile(div)($scope);
angular.element("#demoParentDirective .container").replaceWith(div);
However, this results in: 但是,这导致:
Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-transclude="">
I've created a stripped down demo of what I'm trying to do in Plunker to show how I'm doing it: 我已经在Plunker中创建了一份我要尝试做的简短演示,以展示我的工作方式:
http://plnkr.co/edit/xIKwJqKFbvs6DVnJrDUh?p=preview http://plnkr.co/edit/xIKwJqKFbvs6DVnJrDUh?p=preview
Any help would be appreciated. 任何帮助,将不胜感激。 Thanks.
谢谢。
As requested, I've created a follow-up question asking if there is a better way to achieve what it is I'm trying to achieve: 根据要求,我创建了一个后续问题,询问是否有更好的方法来实现我要实现的目标:
Creating a 'tab-away' attribute Directive with AngularJS 用AngularJS创建一个'tab-away'属性指令
Adding transclude to your child directive fixes the issue in your Plunk 在子指令中添加transclude可以解决Plunk中的问题
angular.module('demo')
.directive('demoChildDirective', function() {
return {
restrict: "A",
priority: 500,
transclude: true,
link: function(scope, element, attributes) {
console.log("Child Directive Applied.");
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.