angularjs - 简单的 Angular 指令

Question

我正在尝试编写我的第一个 Angular 指令来为我的应用程序添加分页功能。
我现在保持简单，并希望指令只共享 Controller 的范围。

在我的 Controller 中，我有一个作用域变量，称为:

$scope.pages

在我的指令的链接函数中，我可以这样做:

console.dir($scope)

查看 Controller 范围对象的内容，但如果我尝试访问 pages 属性，它会以未定义的形式返回。

我错过了什么？

提前致谢。

myDirectives.directive("mdPagination", function(){
    return {
        template: '',
        restrict: 'A',
        priority: 1000,
        scope: false,
        link: function($scope, el, attrs){
            console.dir($scope.pages);  //returns undefined
            el.text('hello world');
        },
    }
});

编辑:我知道那里有分页模块，但我的需求是适度的，我认为构建自己的模块将是开始学习如何构建指令的简单方法。

Answer 1

您遇到的问题是指令链接函数在 Controller 之前运行，因此您通常无法在此链接阶段访问范围值。还有其他几种方法可以做到这一点。解决问题的最直接方法是使用 $scope.$watch .所以这样的事情应该有效:

$scope.watch('pages', function(pages) {
  console.dir(pages);
});

这适用于丢失的情况。我还建议通过使用属性为您的 watch 传递表达式(基本上是属性名称)，将您的 Controller 与它声明的范围解耦。一个简单的示例可能如下所示:

<div my-directive="myProperty">

link: function($scope, el, attrs) {
  $scope.watch(attrs.myDirective, function(value) {
   //do something you need to do with the value here
  });
}

但是，当您增加指令的复杂性时，您可能希望将指令赋予它自己的 Controller 来管理状态，而无需直接调用 watch 。此 Controller 可以使用属于指令本身的子范围和 scope: true。或者只是将父作用域与 scope: false 一起使用.您的选择可能取决于需要。然后你可以有:

myDirectives.directive("mdPagination", function(){
    return {
        template: '',
        restrict: 'A',
        priority: 1000,
        controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
             console.dir($scope.pages);

        }],
        link: function($scope, el, attrs){
          $element.text('hello world');
        }
    }
});