作用域加载了 $http 数据后 Angularjs 运行指令答案

【问题标题】：Angularjs run directive after scope has loaded with $http data作用域加载了 $http 数据后 Angularjs 运行指令
【发布时间】：2014-08-15 10:06:24
【问题描述】：

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


 });

【问题讨论】：

标签： jquery html angularjs emit

【解决方案1】：

使用ng-if 如果在此调用之前 cData 为空，则使用如下：

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

如果没有，您可以拥有一个额外的变量，例如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= '';
    });
};

【讨论】：

这是一个简单干净的解决方案
这是一个比$scope.$watching 或使用$timeout 更优雅的解决方案，因为在超时运行之前数据可能无法加载。

【解决方案2】：

好的，我已经为任何感兴趣的人找到了解决方法。可能不是最好的答案，但它已经解决了问题。

我使用了 $timeout 函数来启用要渲染的屏幕。

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

【讨论】：