recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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

假数据的demo:pagination

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<code><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>

</code>

后台请求:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<code>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;

}]);

</code>

指令如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

<code>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;

            };

        }

    }

}]);

</code>

大家讲道理大家讲道理2837 Il y a quelques jours531

répondre à tous(4)je répondrai

  • 迷茫

    迷茫2017-04-10 15:29:14

    我不太理解你这个写法

    1

    2

    3

    4

    <code>scope.itemsList = attrs.itemslist;

     

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

    </code>

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

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

    1

    2

    3

    4

    5

    6

    <code>scope{

        xxx:'@xxx',

        xxx:'=xxx',

        xxx:'=&xxx'

    }

    </code>

    的形式

    (2)使用$broacast 传播事件

    répondre
    0
  • 黄舟

    黄舟2017-04-10 15:29:14

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

    répondre
    0
  • PHP中文网

    PHP中文网2017-04-10 15:29:14

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

    répondre
    0
  • PHP中文网

    PHP中文网2017-04-10 15:29:14

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

    répondre
    0
  • Annulerrépondre