jquery - スコープが $http データでロードされた後の Angularjs 実行ディレクティブ

Question

http 呼び出しがロードされた後に jPager jquery プラグインを実行するディレクティブを実行する必要があります。

DOM への要素。

jquery は正常に動作していますが、画面がレンダリングされた後にディレクティブを実行することはできません (ディレクティブは前に実行されるため、スコープは空です)

$emit と $broadcast のデモを使用してみましたが、まだ起動できません。

スコープのロード

タグを itemContainer に挿入すると、jQuery はデータをページングします。

<div wss-pager class="holder"></div>
        <ul id="itemContainer" ng-bind-html="ctData"></ul>

////

function loadData() {
                $http({
                        method: 'GET',
                        url: 'api/getMyData',

                    }).
                    success(function(data, status, headers, config) {
                        // deferred.resolve(data);
                        $scope.ctData = data.m_StringValue;
                    //    
                        $scope.$emit('UpdateJPages');
                    }).
                    error(function(data, status, headers, config) {
                        alert("error" + data);
                        $scope.ctData= "";
                    });

            };

/////////

  angular.module('app').directive("wssPager", [function () {
            return {
                restrict: "A",
                link: function (scope, elem, attrs) {
                    scope.$on('UpdateJPages', function() {

                        $("div.holder").jPages({
                            containerID: "itemContainer",
                            perPage: 5,
                            startPage: 1,
                            startRange: 1,
                            midRange: 5,
                            endRange: 1
                        });


 });

Answer 1

ng-if この呼び出しの前に cData が空の場合は、次のように使用します。

<div wss-pager class="holder" ng-if="ctData"></div>

そうでない場合は、追加の var を 1 つ持つことができます。loaded

<div wss-pager class="holder" ng-if="loaded"></div>
function loadData() {
    $scope.loaded = false;
    $http({
        method: 'GET',
        url: 'api/getMyData'
    })
    .success(function(data, status, headers, config) {
        // deferred.resolve(data);
        $scope.ctData = data.m_StringValue;
        $scope.loaded = true
        $scope.$emit('UpdateJPages');
    })
    .error(function(data, status, headers, config) {
        alert('error' + data);
        $scope.ctData= '';
    });
};

Answer 2

わかりました、興味のある人のための回避策を見つけました。最善の答えではないかもしれませんが、問題は解決しました。

$timeout 関数を使用して、画面をレンダリングできるようにしました。

 $timeout(function () {
       $scope.$emit('UpdateJPages');
         });