指令中directive 如何獲取父級中經過$http獲取的數據

一般,controller 中設置的scope 若是是靜態值或者同步運算值 在directive的link函數中可以經過scope來獲取(scope要繼承父級scope的前提)php

可是異步狀況下(好比$http方式獲取數據scope.xxx) 就不能在link函數中獲取到scope.xxx,雖然console.log(scope)居然能看獲得scope.xxx是有值的 。app

此時咱們能夠使用 $broadcast傳播事件來獲取相應的scope異步

案例ide

'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 [];
        }
    };
});
相關文章
相關標籤/搜索