5

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

在我的控制器中，我有一个作用域变量，称为：

$scope.pages

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

console.dir($scope)

查看控制器范围对象的内容，但如果我尝试访问 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');
        },
    }
});

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

4

3 回答 3

5

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

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

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

<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
  });
}

但是，当您增加指令的复杂性时，您可能希望将指令赋予它自己的控制器来管理状态，而无需直接调用手表。此控制器可以使用属于指令本身的子范围，也可以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');
        }
    }
});
于 2013-10-21T05:16:20.630 回答
-1

默认情况下，该指令与控制器共享其范围。为此，您的对象中不能有“范围”属性，如下所示：

myDirectives.directive("mdPagination", function(){
    return {
        template: '',
        restrict: 'A',
        priority: 1000,
        link: function($scope, el, attrs){
            console.dir($scope.pages);
            el.text('hello world');
        },
    }
});
于 2013-10-18T14:22:54.710 回答
-1

@Sandro 是对的。scope您在指令中设置属性，false这意味着范围不会与控制器继承（或共享）其属性。如果您删除了错误，它应该可以按您的意愿工作。

如何使用的文档$scope在这里：http ://code.angularjs.org/1.2.0-rc.3/docs/api/ng .$rootScope.Scope

创建指令的开发人员指南有很多关于如何设置指令的好信息，以便它为您提供所需的范围。这些文档在这里：http ://code.angularjs.org/1.2.0-rc.3/docs/guide/directive

希望有帮助。

于 2013-10-20T21:37:05.273 回答