AngularJS指令：隔离范围和属性

一尘不染

AngularJS指令：隔离范围和属性

angularjs

请在这里查看示例

foodMeApp.directive('fmRating', function() {
  return {
    restrict: 'E',
    scope: {
      symbol: '@',
      max: '@',
      readonly: '@'
    },
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {

      attrs.max = scope.max = parseInt(scope.max || 5, 10);
...

角需要symbol，max，readonly以在所述分离的范围对象从父范围访问它来限定。

在这里使用

<fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"></fm-rating>

那么，目的是attrs什么？无法访问通过传递的所有属性attrs。为什么不能将max的一个访问值attrs.max代替scope.max

为什么要分配回来像attrs.max = scope.max？

由于此应用程序是由Angular作者编写的，因此我希望有一个理由。

谢谢。

阅读 208

2020-07-04

共1个答案

一尘不染

attrs的目的是什么？

在与指令相同的元素上定义的属性有几个用途：

它们是将信息传递到使用隔离范围的指令的唯一方法。由于指令isolate作用域并不典型地继承自父作用域，因此我们需要一种方法来指定要传递给isolate作用域的内容。因此，“对象哈希”中的“ @”，“ =”和“＆”都需要一个属性来指定要传递的数据/信息。
它们充当指令间的通信机制。例如，独立管理独立AngularJS指令之间的通信
它们将属性名称标准化

一个人不能访问通过attrs传递的所有属性吗？

是的，你可以，但是

您将没有任何数据绑定。
“ @”设置单向“字符串”数据绑定（父作用域→指令隔离作用域）使用@，您在指令中看到/获取的值始终是字符串，因此，如果您尝试传递反对您的指令。
‘=’设置双向数据绑定（父作用域↔指令隔离作用域）。
没有数据绑定，您的指令不能$ watch或$ observe自动更改模型/数据。
带{{}}s的属性值会给您带来麻烦，因为它们不会被插值。
假设我们有<my-directive name="My name is {{name}}">，父范围有$scope.name='Mark'。然后，在链接功能内部console.log(attrs.name)，生成undefined。如果name是用’@’定义的隔离范围属性，则attrs.$observe('name', function(val) { console.log(val)})结果为My name is Mark。（请注意，在链接函数内部，必须使用$observe（）获取插值。）

为什么不能将max的一个访问值作为attrs.max而不是scope.max

以上回答

为什么要像attrs.max = scope.max这样分配回来？

我能想到的唯一原因是万一其他指令需要查看该属性/值（即，指令间通信）。但是，另一个指令可能需要在此指令之后运行才能起作用（可以通过priority指令设置对其进行某种程度的控制）。

简介：在具有隔离范围的指令中，通常您不想使用attrs。（我想这可能是将初始化数据/值发送到指令的一种方法，即，如果您不需要这些值的数据绑定并且不需要插值。）

2020-07-04