Question

所以我已经使用AngularJS几个月了，我已经浏览了互联网和我的AngularJS指令书来解答这个问题。

在指令中，我几乎总是看到这段代码：

“范围，元素，影响”功能中的项目究竟是什么？这可能是一个愚蠢的问题，但我似乎无法在任何地方找到答案。

谢谢！

Answer 1

根据文档here为您的自定义指令定义参数scope，element和attrs，但您可以将它们重命名为您的喜好。

scope：这是自定义指令的范围，类似于控制器中的$scope

element：这是自定义指令的元素

attrs：~~这是自定义指令~~中的属性集。（应该是元素的属性，感谢@zeroflagL进行更正！）

例如，如果你构建一个名为myDirective的自定义指令，你可能会在你的html部分中使用它：

<my-directive num-rows="3"></my-directive>

此处，num-rows是您的指令的属性，您可以在link函数中获取其值：

function link(scope, element, attrs) {
    console.log('num-rows:', attrs.numRows);
    //you can change its value, too
    attrs.$set('numRows', '10'); //attrs setter

    //you can watch for its changes to trigger some event
    attrs.$observe('numRows', function(newVal) {
       console.log('trigger some event for the changes in numRows here');
    });
}

此外，在上面的链接函数中，您可以将元素/指令绑定到操作：

element.bind('click', function() {
   console.log('do something with the click event');
});

我建议您花一些时间阅读文档。链接函数可以采用第4个参数，该参数是自定义指令中所需的另一个指令的控制器。 e.g：

require: '^ngModel'
....

function link(scope, element, attrs, ngModelCtrl) {
  ....
}

Answer 2

范围：这是自定义指令的范围，类似于控制器中的$scope

元素：这是自定义指令的元素

attrs ：除了参数

之外什么都没有

链接是什么：功能“参数”（范围，元素，attrs）？ AngularJS

2 个答案: