Angularjs在scope加载了$http data后运行指令



我需要运行一个指令,在一个http调用将

  • 元素加载到DOM后运行jPager jquery插件。

    jquery工作正常,但我不能得到指令后运行屏幕渲染(它只是运行之前,因此范围是空的)

    我已经尝试使用$emit和$broadcast demo's,但仍然不能让它着火。

    作用域将

  • 标签加载到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
                            });
    
     });
    
  • 使用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= '';
        });
    };
    

    好的,我已经找到了一个工作围绕感兴趣的人。也许不是最好的答案,但它已经解决了问题。

    我已经使用$timeout函数来启用屏幕渲染。

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

    相关内容

    最新更新