admin管理员组文章数量:1315110
I have an update button with a directive. When the button is clicked, the targeted element should receive some new html which includes a ngInclude element. It does not seem to be loading the file though, all it does is include a ment like this <!-- ngInclude: nav.html -->
. If I log the tpl
variable I get { 0: <!-- ngInclude: nav.html -->, length: 1 }
. Here is my directive and element generator code.
Directive
angular.module('myApp').directive("contentControl"
,["$pile"
,function($pile){
return {
link: function(scope, element, attrs) {
element.bind("click", function () {
var $container = $(this).closest('#editor_contenteditorcontainer');
var html = "";
$container.find('.row').each(function () {
var $args = $(this).find('form').serializeObject();
html += ' ' + generateContent($args);
});
angular.element(document.getElementById('responsiveviewport')).html(html);
$pile(html)(scope);
scope.$apply();
});
}
}
}]);
Generator
function generateContent($arg){
switch($arg['name']){
case 'Partial':
return '<div ng-include src="\''+$arg['content']+'\'"></div>';
break;
default:
break;
}
}
I have an update button with a directive. When the button is clicked, the targeted element should receive some new html which includes a ngInclude element. It does not seem to be loading the file though, all it does is include a ment like this <!-- ngInclude: nav.html -->
. If I log the tpl
variable I get { 0: <!-- ngInclude: nav.html -->, length: 1 }
. Here is my directive and element generator code.
Directive
angular.module('myApp').directive("contentControl"
,["$pile"
,function($pile){
return {
link: function(scope, element, attrs) {
element.bind("click", function () {
var $container = $(this).closest('#editor_contenteditorcontainer');
var html = "";
$container.find('.row').each(function () {
var $args = $(this).find('form').serializeObject();
html += ' ' + generateContent($args);
});
angular.element(document.getElementById('responsiveviewport')).html(html);
$pile(html)(scope);
scope.$apply();
});
}
}
}]);
Generator
function generateContent($arg){
switch($arg['name']){
case 'Partial':
return '<div ng-include src="\''+$arg['content']+'\'"></div>';
break;
default:
break;
}
}
Share
Improve this question
edited Apr 4, 2015 at 6:48
Silas
asked Apr 4, 2015 at 5:48
SilasSilas
2214 silver badges16 bronze badges
2
-
you need to do
$scope.$apply()
from click event to run digest cycle – Pankaj Parkar Commented Apr 4, 2015 at 6:00 -
1
@pankajparkar thanks for the response. I have updated my answer. I found that the
$pile
needed to be after adding it to the element. I have addedscope.$apply()
also. It will now load the files but it still does not apply the contents of those files into theng-include
– Silas Commented Apr 4, 2015 at 6:50
2 Answers
Reset to default 6You would need to pile the place where you inserted generated content.
.directive('contentControl', ['$pile' ,function($pile){
return {
template: 'Click here',
link: function(scope, element, attrs) {
element.bind('click', function () {
var html = "<p>Template:</p><div ng-include src=\"'template.html'\"></div>";
var templateGoesHere = angular.element(document.getElementById('templateGoesHere'));
templateGoesHere.html(html);
$pile(templateGoesHere)(scope);
scope.$apply();
});
}
}
}]);
See Plunker
$pile(element)(scope)
returns an element that you should place in the DOM. The .html()
part of your code is just inserting your unpiled html, and you're not doing anything with the piled element. Instead, you could do something like:
angular.element(el).empty().append($pile(html)(scope))
本文标签: javascriptAngularJS add nginclude dynamically after app is loadedStack Overflow
版权声明:本文标题:javascript - AngularJS add ng-include dynamically after app is loaded - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741971292a2407852.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论