我有我在做什么跨获取问题非常归结版本。
我有一个简单的directive 。 每当你点击一个元素，它增加了一个又一个。 然而，它需要以正确地呈现它首先编译。
我的研究使我$compile 。 但是，所有的例子都使用一个复杂的结构，我真的不知道如何适用于此。
小提琴在这里： http://jsfiddle.net/paulocoelho/fBjbP/1/
而JS是在这里：
var module = angular.module('testApp', [])
.directive('test', function () {
return {
restrict: 'E',
template: '<p>{{text}}</p>',
scope: {
text: '@text'
},
link:function(scope,element){
$( element ).click(function(){
// TODO: This does not do what it's supposed to :(
$(this).parent().append("<test text='n'></test>");
});
}
};
});
由Josh戴维·米勒解决方案： http://jsfiddle.net/paulocoelho/fBjbP/2/
Answer 1:
你有很多无谓的jQuery在那里，但是$编译服务实际上就是在这种情况下， 超级简单 ：
.directive( 'test', function ( $compile ) {
return {
restrict: 'E',
scope: { text: '@' },
template: '<p ng-click="add()">{{text}}</p>',
controller: function ( $scope, $element ) {
$scope.add = function () {
var el = $compile( "<test text='n'></test>" )( $scope );
$element.parent().append( el );
};
}
};
});
你会发现我为了遵循一些最佳实践重构你的指令了。 让我知道，如果你有任何的问题。
Answer 2:
除了完善添加新的Riceball LEE的例子元素指令
newElement = $compile("<div my-directive='n'></div>")($scope)
$element.parent().append(newElement)
添加新的属性指令存在的元素可以用这种方式来完成：
比方说，您要添加上即时my-directive的span元素。
template: '<div>Hello <span>World</span></div>'
link: ($scope, $element, $attrs) ->
span = $element.find('span').clone()
span.attr('my-directive', 'my-directive')
span = $compile(span)($scope)
$element.find('span').replaceWith span
希望帮助。
Answer 3:
动态上angularjs添加指令有两种形式：
添加angularjs指令到另一个指令
插入一个新元素（指令）
这很简单。 和U可以在“链接”使用或“编译”。
var newElement = $compile( "<div my-diretive='n'></div>" )( $scope );
$element.parent().append( newElement );
插入新属性添加到元件
这很困难，并且让我头疼两天之内。
使用“$编译”将提高关键递归的错误！ 也许它应该忽略当前的指令重新编译元素时。
$element.$set("myDirective", "expression");
var newElement = $compile( $element )( $scope ); // critical recursive error.
var newElement = angular.copy(element); // the same error too.
$element.replaceWith( newElement );
所以，我必须找到一个方法来调用指令“链接”功能。 这是很难得到，这是隐藏深深内关闭了有用的方法。
compile: (tElement, tAttrs, transclude) ->
links = []
myDirectiveLink = $injector.get('myDirective'+'Directive')[0] #this is the way
links.push myDirectiveLink
myAnotherDirectiveLink = ($scope, $element, attrs) ->
#....
links.push myAnotherDirectiveLink
return (scope, elm, attrs, ctrl) ->
for link in links
link(scope, elm, attrs, ctrl)
现在，它的工作。
Answer 4:
function addAttr(scope, el, attrName, attrValue) {
el.replaceWith($compile(el.clone().attr(attrName, attrValue))(scope));
}
Answer 5:
如果您正试图动态地添加使用内嵌一个指令由Josh戴维·米勒接受的答案的伟大工程template 。 但是，如果您的指令有优势templateUrl他的回答是行不通的。 这里是我工作：
.directive('helperModal', [, "$compile", "$timeout", function ($compile, $timeout) {
return {
restrict: 'E',
replace: true,
scope: {},
templateUrl: "app/views/modal.html",
link: function (scope, element, attrs) {
scope.modalTitle = attrs.modaltitle;
scope.modalContentDirective = attrs.modalcontentdirective;
},
controller: function ($scope, $element, $attrs) {
if ($attrs.modalcontentdirective != undefined && $attrs.modalcontentdirective != '') {
var el = $compile($attrs.modalcontentdirective)($scope);
$timeout(function () {
$scope.$digest();
$element.find('.modal-body').append(el);
}, 0);
}
}
}
}]);
Answer 6:
约什 - 戴维·米勒是正确的。
PCoelho，如果你想知道什么$compile做幕后，以及如何从指令生成HTML输出的后面，请看看下面
的$compile服务编译HTML的片段（ "< test text='n' >< / test >" ），其包括该指令（“测试”作为元素），并产生一个函数。 这个函数然后可以用一个范围来获得“从指令HTML输出”执行。
var compileFunction = $compile("< test text='n' > < / test >");
var HtmlOutputFromDirective = compileFunction($scope);
在这里完整的代码样本的更多详情： http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs
Answer 7:
许多以前的答案启发我曾与下面的“斯特罗曼”指令，将与任何其他指令代替本身上来。
app.directive('stroman', function($compile) {
return {
link: function(scope, el, attrName) {
var newElem = angular.element('<div></div>');
// Copying all of the attributes
for (let prop in attrName.$attr) {
newElem.attr(prop, attrName[prop]);
}
el.replaceWith($compile(newElem)(scope)); // Replacing
}
};
});
重要提示：注册要与使用指令restrict: 'C' 。 像这样：
app.directive('my-directive', function() {
return {
restrict: 'C',
template: 'Hi there',
};
});
你可以使用这样的：
<stroman class="my-directive other-class" randomProperty="8"></stroman>
要得到这样的：
<div class="my-directive other-class" randomProperty="8">Hi there</div>
专家提示。 如果你不想使用基于类的指令，那么你可以改变'<div></div>'你喜欢什么样的东西。 例如，有一个包含所需的指令，而不是名称的固定属性class 。
文章来源: How can I dynamically add a directive in AngularJS?
