一般,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 []; } }; });