[英]Angular dynamically adding directive
I want to dynamically use angular-slimscroll in my webpage. 我想在我的网页中动态使用角度倾斜滚动。 The directive looks something like this: 该指令如下所示:
<div id="scroll" slimscroll="{slimscrollOption: value}">
Scroll Content
</div>
How can I dynamically add slimscroll="{slimscrollOption: value}"
into #scroll
div and have it functioning with angular-slimscroll? 如何在#scroll
div中动态添加slimscroll="{slimscrollOption: value}"
并使它与angular-slimscroll一起使用?
You can create a directive, some thing like that: 您可以创建一个指令,诸如此类:
JS JS
angular.module('myApp',[])
.controller('MyCtrl', function ($scope) {})
.directive('myScroll', ['$compile', function($compile) {
return {
scope: true,
link: function(scope, element, attrs) {
element.attr('slimscroll', '{slimscrollOption: value}');
element.removeAttr('my-scroll');
$compile(element)(scope);
}
};
}]);
HTML HTML
<div id="scroll" my-scroll>
Scroll Content
</div>
The key is you need to $compile the element again to dynamically add angular-slimscroll. 关键是您需要再次$ compile该元素以动态添加angular-slimscroll。 And removing attribute 'my-scroll' to advoid infinity loop while compiling. 并删除属性“ my-scroll”以在编译时避免无限循环。
You can see my answer here also (it is the same as your case, I think): How to add toggling of the disabled state of an input via double click from inside a directive? 您也可以在这里看到我的答案(我认为与您的情况相同): 如何通过从指令内部双击来增加输入的禁用状态的切换?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.