Angular ng-repeat 和 jQuery 插件答案

【问题标题】：Angular ng-repeat and jQuery pluginAngular ng-repeat 和 jQuery 插件
【发布时间】：2013-09-11 09:11:21
【问题描述】：

我正在尝试将 this jQuery plugin 转换为 Angular 指令。我做了以下事情：

define(['directives/directives'], function(directives){
directives.directive('vivifysortable', ['$rootScope', function ($rootScope){
    return {
        controller: function ($scope, $element, $attrs){
            // here i pasted definition of multiselectable, 
            //and multisortable from the above jsfiddle
        },
        link: function($scope, $element, $attrs) {
            if ($scope.$last === true) {                    
                setTimeout(function() {
                        angular.element($element).multisortable({                            
                        connectWith: ".product-backlog-column",
                        selectedClass: "ui-selected"
                    });
                })
            }
         }   
    }
}]); 
});

如果我有这样的东西，这很好用

 <ul class="product-backlog-column" vivifysortable >
    // some hardcoded values for testing purposes
    <li> test  1 </li>
    <li> test  2 </li>
    <li> test  3 </li>
 </ul>

但如果我使用 ng-repeat ，看起来它根本不起作用

<ul class="product-backlog-column" vivifysortable >
    <li ng-repeat='item in items'>
        {{item.title}}
    </li>
</ul>

看起来，ng-repeat` 给我带来了困难，但我不知道为什么，以及如何解决它。

这里是 jsfiddle （我不确定我是否正确创建了它，包括 Angular onLoad 和 jQuery 作为外部资源）。

【问题讨论】：

你能用同样的代码做一个小提琴吗？
我刚加了jsfiddle，请看一下

标签： jquery angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

我通过添加$timeout 解决了这个问题。重构后的代码如下所示：

 link: function($scope, $element, $attrs) {
            $timeout(function () {
                angular.element($element).multisortable({

                    connectWith: ".product-backlog-column",
                    selectedClass: "ui-selected"
                });
            }, 0);

  }

问题是$timeout 将停止执行指令，直到ng-repeat 完成渲染。这是我初学者的解释。如果有经验的人可以对此进行更多说明，请这样做。

【讨论】：