Question

我想在$ http.get请求中从dom加载数据后初始化一些jquery插件。见下面的代码：

//this is get request code. I'm getting json data properly.
$http.get('reordering.json').success(function(data) {
        $scope.words = data.data;
        alert($("#sortable").html())
        $("#sortable").sortable();
});

从下面代码<li>生成正常但我无法初始化jquery插件，因为在alert()中它没有显示从json加载的数据。 setTimeout()会有效，但我想知道哪种方法可以做到这一点。

<ul id="sortable" class="dragContainer">
   <li class="dragHolder" ng-repeat="word in words">
       <div class="drag">{{word.value}}</div>
   </li>
</ul>

Answer 1

首先，read this。你现在做错了什么：

不要操纵控制器中的DOM。
使用指令添加行为。

使用这两个建议，您可以通过指令解决问题，该指令将激活.dragContainer上可排序的jQuery UI。 Here's an implementation这样的指示。代码看起来类似于：

<ul class="dragContainer" ng-model="words" ui-sortable>
   <li class="dragHolder" ng-repeat="word in words">
       <div class="drag">{{word}}</div>
   </li>
</ul>

angular
.module("app", ["ui.sortable"])
.controller("ctrl", function ($scope, $timeout) {
  $timeout(function () {
    $scope.words = ["word one", "word two", "word three", "word four"];
  }, 1500);  
})

我已将$http替换为$timeout以模仿异步请求。

JSBin

在html页面中加载数据后$ http.get成功事件

1 个答案: