2016-02-06 1 views
2

Совершенно новый для мира AngularJS и запрет нескольких учебников и демонстраций, которые я выбрал, это моя первая попытка построить что-то в глубину. Поэтому извиняюсь, если я не буду правильно объяснять, что, скорее всего, простой вопрос!

У меня есть контроллер, который выглядит как:

myApp.controller('ShowCtrl', function($scope, $routeParams, $http) { 
    $http({ 
     method: 'GET', 
     url: 'rest/details/'+ $routeParams.identifier 
    }).then(function successCallback(response) { 
     $scope.shows = response.data; 
     myPlugin.init(); 

    }, function errorCallback(response) { 
     $scope.shows = "something bad happened"; 
    }); 
}); 

Это делает запрос GET на пользовательский REST интерфейс, который делает вызов на внешнюю/третью стороне API. Я тогда принять этот ответ апи, присвоить его объем, и цикл через него, чтобы отобразить элементы в моей частичной .html

<li ng-repeat="(key, show) in shows" class="required-element"> 
    {{ show.title }} 
</li> 

Это прекрасно работает. Область имеет ответ, и я могу циклически отображать элементы, как ожидалось.

Проблема возникает с тем, что я также использую плагин, который, кажется, инициализируются перед элементы, написанные в DOM.

В приведенном выше коде вы можете увидеть, что плагин .init(); называется сразу после, присваивая ответ api контроллеру $ scope. Поэтому никакие функциональные возможности плагина не связаны с этими элементами.

Есть ли способ отсрочить мой init(); когда я могу быть уверен, что элементы DOM были записаны на страницу? Я сделал кучу поиска для решения, и похоже, может быть, решение может быть угловым директивой?

Любая помощь с благодарностью!

[ОБНОВЛЕНИЕ] - ОК, у меня найдено несколько решений до сих пор (один из которых вызывает у меня facepalm). Тем не менее, это не похоже на «лучший» способ. не удалось пару раз

- простой способ. запустите плагин через jQuery document.ready(); - это работает по какой-то причине и заставляет меня чувствовать себя глупо, как долго мне потребовалось. (nvm, не работает)

- путем переноса моих $ http GET запросов на угловую фабрику с обещанием вернуться. Я бы загрузил область с одним, затем мой плагин с другим. Похоже, слишком много, но довольно опыт.

ответ

2

Вы должны вводить $timeout в контроллер и использовать его как это:

myApp.controller('ShowCtrl', function($scope, $routeParams, $http, $timeout) { 
    $http({ 
     method: 'GET', 
     url: 'rest/details/'+ $routeParams.identifier 
    }).then(function successCallback(response) { 
     $scope.shows = response.data; 
     $timeout(function() { 
      myPlugin.init(); 
     }); 
    }, function errorCallback(response) { 
     $scope.shows = "something bad happened"; 
    }); 
}); 

Таким образом, вы будете вызывать функцию myPlugin.init(); только после переваривания цикл закончился, и вид визуализации.

+1

Boom bam! Я считаю, что это именно то, что я искал. Я ошибся с моим предыдущим комментарием, document.ready(); на самом деле не работает. – Just2Jays

+0

@ Just2Jays - Просто убедитесь, что мой ответ все еще работает, не так ли? –

+0

уверен! Еще раз спасибо! – Just2Jays

Смежные вопросы