$ http.get成功事件後在HTML頁面加載數據

我想初始化一些jquery插件後，從$ http.get請求中加載數據的DOM。請參見下面的代碼：

//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>

來源

2014-09-03 siraj pathan

首先，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。

來源

2014-09-03 04:25:18

$ http.get成功事件後在HTML頁面加載數據

回答

相關問題