javascript - Angular 动态添加指令

Question

我想在我的网页中动态使用 angular-slimscroll。该指令看起来像这样:

<div id="scroll" slimscroll="{slimscrollOption: value}">
    Scroll Content
</div>

如何动态地将 slimscroll="{slimscrollOption: value}" 添加到 #scroll div 中并使其与 angular-slimscroll 一起运行？

Answer 1

您可以创建一个指令，类似这样的东西:

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”以避免编译时无限循环。

您也可以在这里看到我的答案(我认为这与您的情况相同):How to add toggling of the disabled state of an input via double click from inside a directive?