Javascript 关于Angularjs指令的几个问题

首先，我将向您展示我的html：

  <div class="pager" pager-control getPageNumber="getPageNumber()" getPageData="getPageData()">

我这个指令的目的是制造寻呼机。 这是js文件：

var paging = angular.module('paging',[]);

paging.controller('pageCtrl',function($scope,$timeout){


$scope.currentPageIndex = 0;
$scope.model = [
  { name: 'www'},
  { name: 'www'},
  { name: 'www'},
  { name: 'www'},
  { name: 'www'}
];

$scope.getPageNumber = function(){
  var len = 10,ret=[];
  for(i = 0;i < 10; i++) {
    ret.push(i);
  }
  return ret;
};

$scope.getPageData = function(index) {
  $scope.currentPageIndex = index;
  alert('trigger!');
};
});

paging.directive('pagerControl',function(){

 return {
  restict: 'A',
  replace: false,
  transclude: true,
template: '<ul ng-transclude><li ng-class="{current: $parent.currentPageIndex == $index}" ng-repeat="d in $parent.getPageNumber()" ng-click="$parent.getPageData($index)">{{$index + 1}}</li>    </ul>',
scope: {

},

link: function(scope,elem,attr) {

}

})

})

当您单击页面项目时，颜色会发生变化，但不会发生任何变化

这是jsbin url： 我修复了你的jsbin：

您的代码有两个问题：

1 ng repeat创建子作用域

您必须将ng click=$parent.getPageData$index替换为ng click=$parent.$parent.getPageData$index才能访问正确的范围

2将currentIndex=currentPageIndex替换为currentIndex=currentPageIndex。这是angular的命名约定

---

对于第一个问题，您不应该直接绑定到父范围，因为它将在代码中创建紧密耦合。您应该改为绑定到作用域自己的属性。

谢谢，它可以工作。。但是为什么$parent.$parent.getPageData$index不是$parent.getPageData$index？谢谢again@Daniel.Woo：因为ng repeat创建子作用域=>还有1级深度$parent是指令的作用域，$parent.$parent是控制器的作用域。