Angular 动态添加指令
Angular dynamically adding directive
我想在我的网页中动态使用 angular-slimscroll。该指令看起来像这样:
<div id="scroll" slimscroll="{slimscrollOption: value}">
Scroll Content
</div>
如何将 slimscroll="{slimscrollOption: value}"
动态添加到 #scroll
div 中并使其与 angular-slimscroll 一起运行?
你可以创建一个指令,类似这样的东西:
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
<div id="scroll" my-scroll>
Scroll Content
</div>
关键是你需要再次$compile元素才能动态添加angular-slimscroll。并删除属性 'my-scroll' 以避免编译时出现无限循环。
你也可以在这里看到我的回答(我想和你的情况一样):
我想在我的网页中动态使用 angular-slimscroll。该指令看起来像这样:
<div id="scroll" slimscroll="{slimscrollOption: value}">
Scroll Content
</div>
如何将 slimscroll="{slimscrollOption: value}"
动态添加到 #scroll
div 中并使其与 angular-slimscroll 一起运行?
你可以创建一个指令,类似这样的东西:
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
<div id="scroll" my-scroll>
Scroll Content
</div>
关键是你需要再次$compile元素才能动态添加angular-slimscroll。并删除属性 'my-scroll' 以避免编译时出现无限循环。
你也可以在这里看到我的回答(我想和你的情况一样):