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