Question

我是AngularJS的新人，

我试图创建一个将jQuery JScrollPane（JScrollpane.kelvinluck.com）应用于div的自定义指令。

我有以下HTML代码：

<scrollPane> ------> WRONG
<div scroll-pane> -----> RIGHT
    <ul>
        <li data-ng-repeat="task in tasks">
            <div class="task-element">
                <div class="name">{{task.display_name}}</div>
                <div class="text">{{task.min_description}}</div>
            </div>
        </li>
    </ul>
</scrollPane>

以及以下指令：

angular.module('myApp', []).directive('scrollPane',function() {
return {
    restrict:'A',
    template: '<div></div>',
    link: function (scope, elm, attrs) {
    console.log("in directive");
    element.addClass('scroll-pane');
    element.jScrollPane({showArrows: true,autoReinitialise:true });
}};
});

主要问题是模板的html会覆盖整个<scrollPane>元素，并且根本不显示ng-repeat <li>并从最终的html中删除。

创建指令的正确方法是用html包装内部html（在我的示例中它将是div和class='scroll-pane' )，我应该在哪里插入： $('.scroll-pane').jScrollPane();？

感谢帮助者。

更新：以上代码变得不起作用，问题出在HTML中，因为该指令应该带有限制：＆＃34; A＆＃34;在指令中。（感谢http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/提示）

应用jScrollPane，我只是在指令

中使用

element.jScrollPane({showArrows: true,autoReinitialise:true });

一切都为我工作，但我有一个问题是开放的：对于某些css解决方法，我必须在ng-repeat中获取任务的长度，以便为div设置固定的高度。我在调试时看到它还没有渲染，怎么可能，等到ng-repeat获取数据？（使用服务）。

Answer 1

也许你正在寻找转录功能

angular.module('myApp', []).directive('scrollPane',function(){
return {
    restrict:'E',
    transclude: true,
    template: '<div class='scroll-pane' ng-transclude></div>',
    link: function (scope, elm, attrs) {
        console.log("in directive");
    }
};
});

这会将<scroll-pane>的内容放入模板的div。

我不确定放置$('.scroll-pane').jScrollPane();的位置可能在链接功能和angular.element(jquery selector here)，角度包装。指令定义对象中的link函数实际上是一个post-link函数，它将在修改DOM后运行。这是安全的地方做额外的DOM修改。

编辑：此答案的某些部分与当前版本的问题不符。例如，restrict: 'E'

Answer 2

AnguarJS指令的概念为transclude。如果要将指令中包含的html包装到父html中，则需要使用transclude

所以你的指令定义将成为

angular.module('myApp', []).directive('scrollPane',function(){
return {
    restrict:'E',
    replace: true,
    transclude: true,
    template: '<div class='scroll-pane' ng-transclude></div>',
    link: function (scope, elm, attrs){
    console.log("in directive");
}};

});

浏览指令here

的开发者指南

使用ng-repeat嵌套自定义指令

2 个答案: