javascript - angular 指令中后台请求的数据无法传递到指令中何解？

Question

页面加载后指令里边这个musicList没有值，controller里边写假值的时候正常，用ajax请求数据后就不正常了

假数据的demo：pagination

<p class="rotating-content-container">
                <ul class="rotating-content">
                    <li class="new-music" ng-repeat="music in musicList |
                        offset: currentPage*itemsPerPage |
                        limitTo: itemsPerPage"
                        ng-click="musicPlay.nextPlay(music)">
                        <img ng-src="{{music.src}}" width="178" height="100">
                        <p class="music-info ellipsis">
                            <span class="music-name">{{music.name}}</span>
                            <span>-</span>
                            <span class="music-singer">{{music.singer}}</span>
                        </p>
                        <p id="comment" class="music-comment ">
                            <span>
                               {{music.content}}
                            </span>
                        </p>
                    </li>
                </ul>
                <p class="paging">
                    <pagination currentPage="0" itemsPerPage="6"itemsList="musicList" pageList="3"></pagination>
                </p>
            </p>

后台请求：

music.controller('HomeCtrl', ['$scope', 'audioService', 'homeService', function ($scope, audioService, homeService){

    homeService.getMusicList().then(function (data){
        $scope.musicList = data;
    });

    homeService.getRankFour().then(function (data){
        $scope.musicRank = data;
    });

    $scope.playMusic = function (){
        audioService.playMusic();
    }

}]);

music.factory('homeService', ['$rootScope', '$http', function ($rootScope, $http){

    var service = {};

    service.getMusicList = function (){
        var url = $rootScope.apiHost + '/musicmood';
        return $http.get(url).then(function (resp){
            return resp.data;
        });
    };

    service.getRankFour = function (){
        var url = $rootScope.apiHost + '/rankfour';
        return $http.get(url).then(function (resp){
            return resp.data;
        });
    };

    return service;
}]);

指令如下：

music.directive('pagination', ['$interval', function ($interval){
    return {
        restrict: 'AE',
        replace: true,
        template: '\


<p>\
                <span ng-click="jumpHead()">首页</span> \
                <span ng-click="prevPage()" ng-disabled="prevPageDisabled()">上一页</span>\
                <sapn ng-hide="prevPageDisabled() || (currentNum+1<=1)">...</sapn> \
                <span ng-repeat="num in number | \
                offset: currentNum*pageList | \
                        limitTo: pageList" \
                        ng-click="jumpPage(num)" \
                        ng-class="{numactive: currentPage+1 == num}">{{num}}</span> \
                <sapn ng-hide="nextPageDisabled() || (total<=pageList)">...</sapn> \
                <span ng-click="nextPage()" ng-disabled="nextPageDisabled()">下一页</span>\
                <span ng-click="jumpEnd()">尾页</span> \
            </p>

',
        link:function (scope, element, attrs){
            scope.currentPage = attrs.currentpage;
            scope.itemsPerPage = attrs.itemsperpage;
            scope.itemsList = attrs.itemslist;
            scope.pageList = attrs.pagelist;
            // console.log(scope);

            scope.itemsList = scope.$eval(scope.itemsList);

            scope.pageCount = function () {
                if (scope.itemsList) {
                    return Math.ceil(scope.itemsList.length / scope.itemsPerPage);
                } else {
                    return 1;
                }
            };
            scope.total = scope.pageCount();

            scope.number = [];
            for(var i=0; i<scope.total; i++){
                scope.number.push(i+1);
            };

            scope.currentNum = 0;
            scope.jumpPageList = function (){
                scope.currentNum = parseInt(scope.currentPage/scope.pageList);
            };

            scope.jumpPage = function (num){
                scope.currentPage = num -1;
                scope.jumpPageList();
            };

            scope.jumpHead = function (){
                scope.currentPage = 0;
                scope.jumpPageList();
            }

            scope.jumpEnd = function (){
                scope.currentPage = scope.total-1;
                scope.jumpPageList();
            }

            scope.prevPage = function () {
                if(scope.prevPageDisabled()){
                    return;
                }
                if (scope.currentPage > 0) {
                    scope.currentPage--;
                }
                scope.jumpPageList();
            };

            scope.prevPageDisabled = function () {
                return scope.currentPage +1 == 1;
            };

            scope.nextPage = function () {
                if(scope.nextPageDisabled()){
                    return;
                }
                if (scope.currentPage < scope.pageCount()) {
                    scope.currentPage++;
                }
                scope.jumpPageList();
            };

            scope.nextPageDisabled = function () {
                return (scope.currentPage +1) == scope.total;
            };
        }
    }
}]);

Answer 1

我不太理解你这个写法

scope.itemsList = attrs.itemslist;

scope.itemsList = scope.$eval(scope.itemsList);

不过在指令中 如果你不设置scope的话 默认是继承父类的scope
所以你直接用scope.itemslist就是 html页面中的 itemslist值，而不需要用attr.xx去获取

（1） 一般为了不污染父级的scope 都会设置成

scope{
    xxx:'@xxx',
    xxx:'=xxx',
    xxx:'=&xxx'
}

的形式

（2）使用$broacast 传播事件

Answer 2

把 $http 请求的 代码贴下~~

Answer 3

感觉你应该是加载的问题，数据加载在指令生效之后，所以没有数据，以前遇到过类似的问题，检查一下加载顺序。

Answer 4

你好，请问 你这个问题解决了吗？我现在也遇到 同样的问题，而且监控失败