关于 Angularjs 指令的一些问题

Question

首先，我将向您展示我的 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 网址：
http://jsbin.com/vijax/2/edit

Answer 1

我修复了你的 jsbin：

http://jsbin.com/kaziqice/2/edit

您的代码有 2 个问题：

1) ng-repeat 创建子作用域。

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

2) 将currentIndex="currentPageIndex" 替换为current-index="currentPageIndex"。这是angularAngular JS naming conventions ($, camelCase and PascalCase)的命名约定

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