我在Angular中有两个指令。一个必须被困在另一个中。我的问题是,transclude
函数运行后,我无法使用简单的JQuery选择器访问DOM 。特别是,我想编译第一个指令(主题),然后将其注入另一个指令(关于我们),以便可以访问关于我们链接功能中的DOM元素。这是我要实现的代码:
<section>
<topic active = "true" title = "Lorem ipsum" icon = "ti-layers">A) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
<topic title = "Lorem ipsum" icon = "ti-package">B) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
<topic title = "Lorem ipsum" icon = "ti-stats-up">C) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
<topic title = "Lorem ipsum" icon = "ti-layout-media-center-alt">D) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
</section>
about-us和topic指令都transclude: true
在其配置内使用以编译各自的模板。
angular.module('playground', []).directive('topic', function()
{
return {
restrict: 'E',
replace: true,
templateUrl: 'path/to/topic.html',
transclude: true,
scope: true,
link: function(scope, element, attributes, ctrl, transclude)
{
// Playing around with scope
// Transcluding
element.find('.tab-content p').append(transclude());
}
};
}).directive('section', ['$timeout', function($timeout)
{
return {
restrict: 'E',
replace: true,
templateUrl: 'path/to/about-us.html',
transclude: true,
link: function(scope, element, attributes, ctrl, transclude)
{
element.find('.tabs').append(transclude());
// Now I want to retrieve some DOM contents after the transclude has taken place
$timeout(function()
{
// Playing with DOM and JQuery but sometimes this function run prior of the child transclude function
});
}
};
}]);
为了完整起见,以下是两个模板的代码:
<!-- topic.html -->
<li class="ng-class:active">
<div class="tab-title">
<i class="icon ng-class:icon;"></i>
<span>{{title}}</span>
</div>
<div class="tab-content">
<!-- ng-transclude directive not needed -->
<p ng-transclude></p>
</div>
</li>
<!-- about-us.html -->
<section class="bg-secondary pb0" id="about-us">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2 class="mb64 mb-xs-24">About us.</h2>
</div>
<div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
<div class="tabbed-content icon-tabs">
<ul class="tabs"></ul>
</div>
</div>
</div>
</div>
</section>
问题在于,$timeout
作为变通方法调用的函数具有完全随机的行为,有时有时起作用,而有时则不起作用。我怎样才能解决这个问题?我是否缺少有关转写,链接和编译功能的信息?谢谢您的答复!
我已经解决了在main指令上设置简单观察程序并transcludeFn
在链接函数中使用Angular注入的问题。
这是代码。希望如果您遇到类似的问题也能有所帮助。
angular.module('playground', []).directive('topic', function()
{
return {
restrict: 'AE',
replace: true,
templateUrl: 'path/to/topic.html',
transclude: true,
scope: true,
link: function(scope, element, attributes, ctrl, transclude)
{
// Playing with scope...
transclude(scope.$parent, function(clone, parent_scope)
{
// Transcluding
element.find('.tab-content p').append(clone);
// It's time to render!
parent_scope.should_render = true;
});
}
};
}).directive('Section', function()
{
return {
restrict: 'E',
replace: true,
templateUrl: 'path/to/section.html',
transclude: true,
scope: {},
link: function(scope, element, attributes, ctrl, transclude)
{
scope.rendered = false;
scope.should_render = false;
transclude(scope, function(clone)
{
// Transcluding
element.find('.tabs').append(clone);
});
// Setting up a watcher
var remove_watcher = scope.$watch('should_render', function(should_render)
{
if(should_render)
{
if(scope.rendered)
{
remove_watcher();
return;
}
// Now I can play with the DOM and JQuery.
scope.rendered = true;
}
});
}
};
})
现在,我可以像这样使用指令:
<section>
<topic active = "true" title = "Lorem ipsum" icon = "ti-layers">A) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
<topic title = "Lorem ipsum" icon = "ti-package">B) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
<topic title = "Lorem ipsum" icon = "ti-stats-up">C) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
<topic title = "Lorem ipsum" icon = "ti-layout-media-center-alt">D) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</topic>
</section>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句