Question

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

在我的控制器中，我有一个名为：

的范围变量

$scope.pages

在我的指令的链接功能中，我可以这样做：

console.dir($scope)

查看控制器范围对象的内容，但如果我尝试访问pages属性，则返回为undefined。

我错过了什么？

提前致谢。

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

您遇到的问题是指令链接函数在控制器之前运行，因此在此链接阶段通常无法访问范围值。还有其他几种方法可以做到这一点。解决问题的最直接方法是$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');
        }
    }
});

Answer 2

默认情况下，该指令与控制器共享其范围。要做到这一点，你的对象中不能有“范围”属性，如：

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

Answer 3

@Sandro是对的。您将指令中的scope属性设置为false，这意味着范围不会继承（或共享）其属性与控制器。如果删除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

希望有所帮助。

简单的角度指令

3 个答案: