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

您的代码有两个问题：

1）ng-repeat创建子范围。

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

2）将currentIndex="currentPageIndex"替换为current-index="currentPageIndex"。这是angular Angular JS naming conventions ($, camelCase and PascalCase)

的命名约定

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

关于Angularjs指令的一些问题

1 个答案: