指令中directive 如何获取父级中通过$http获取的数据

2019独角兽企业重金招聘Python工程师标准>>>

通常，controller 中设置的scope 如果是静态值或者同步运算值 在directive的link函数中能够通过scope来获取（scope要继承父级scope的前提）

但是异步情况下（比如$http方式获取数据scope.xxx） 就不能在link函数中获取到scope.xxx，虽然console.log(scope)竟然能看得到scope.xxx是有值的 。

此时我们可以使用 $broadcast传播事件来获取相应的scope

案例

 'use strict';
var app = angular.module('app', [
    'app.controllers',
    'pagination.directives',
    'pagination.filters'
]);
app.factory('list', function($http) {
        return {
            musiclist: function() {
                return $http.get('/index.php');
            }
        }
    })
    //Controllers
angular.module('app.controllers', []);
app.controller('AppCtrl', ['$scope', '$http', 'list', function($scope, $http, list) {
    list.musiclist().success(function(response) {
        $scope.musicEmotion = response;
        $scope.$broadcast('getmusiclist');
    });
}]);

//Directives
angular.module('pagination.directives', []);
app.directive('pagination', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '\
            <div>\
                <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> \
            </div>',
        link: function(scope, element, attrs) {
            scope.$on('getmusiclist', function() {
                finish();
            });
            var finish = function() {
                scope.currentPage = attrs.currentpage;
                scope.itemsPerPage = attrs.itemsperpage;
                scope.itemsList = scope.musicEmotion;
                scope.pageList = attrs.pagelist;

                //scope.itemsList = scope.$eval(scope.itemsList);
                scope.pageCount = function() {
                    if (scope.itemsList) {
                        return Math.ceil(scope.itemsList.length / scope.itemsPerPage);
                    } else {
                        alert(111)
                        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;
                };
            }


        }
    }
});

//Filters
angular.module('pagination.filters', []);
app.filter('offset', function() {
    return function(input, start) {
        if (input) {
            start = parseInt(start, 10);
            return input.slice(start);
        } else {
            return [];
        }
    };
});

转载于:https://my.oschina.net/u/1040928/blog/472135