$http.get success event after loading data in html page

Question

I want to initialize some jquery plugin after data is loaded in dom from $http.get request. See below code:

//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();
});

From below code <li> is generating properly but I'm not able to initialize jquery plugin because in alert() it is not showing data loaded from json. setTimeout() will work but I want to know which is proper way to do this.

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

score 2 · Accepted Answer · edited May 23 '17 at 10:26

First of all, read this. You are doing some things wrong at the moment:

Do not manipulate DOM in controllers.
Add behaviour with directives.

Using these two advices, you can solve the problem by directive that will activate jQuery UI sortable on .dragContainer. Here's an implementation of such directive. The code will look similar to this:

<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);  
})

I have replaced $http with $timeout to imitate async request.

JSBin.

$http.get success event after loading data in html page

1 Answers1