当前位置: 首页 > 面试题库 >

AngularJS指令:隔离范围和属性

壤驷安和
2023-03-14
问题内容

请在这里查看示例

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

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

在这里使用

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

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

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

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

谢谢。


问题答案:

attrs的目的是什么?

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

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

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

是的,你可以,但是

  1. 您将没有任何数据绑定。
    “ @”设置单向“字符串”数据绑定(父作用域→指令隔离作用域)使用@,您在指令中看到/获取的值始终是字符串,因此,如果您尝试传递反对您的指令。
    ‘=’设置双向数据绑定(父作用域↔指令隔离作用域)。
    没有数据绑定,您的指令不能$ watch或$ observe自动更改模型/数据。


  2. {{}}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。(我想这可能是将初始化数据/值发送到指令的一种方法,即,如果您不需要这些值的数据绑定并且不需要插值。)



 类似资料:
  • 那么,的目的是什么?不能访问通过传递的所有属性。为什么一个max的访问值不能作为而不是 为什么要像那样分配回来? 谢了。

  • 问题内容: 等号后的问号有特殊含义吗?即: 上面的意思是“无法解决’foo’时不会引发错误?” 问题答案: 是: “隔离”范围采用对象散列,该对象散列定义了一组从父范围派生的局部范围属性。这些本地属性对于为模板的别名设置别名很有用。本地定义是本地范围属性与其源的哈希值: 或-在本地范围属性和通过属性值定义的名称的父范围属性之间建立双向绑定。如果未指定名称,则假定属性名称与本地名称相同。给定 和的窗

  • 问题内容: 我想在没有自己的模板的AngularJS中创建可重用的指令。我也想为该指令设置隔离范围。我的方法的最佳做法是什么?为什么我的示例不符合我的预期? 我希望可以分别从指令中编辑obj1和obj2。 HTML: JS: PLUNKR:http://plnkr.co/edit/Dw8IiFVSOZGjSTFGRMzZ 问题答案: 您的代码现在的工作方式是,每个指令的内容都绑定到父作用域,而不是

  • 问题内容: 我首先尝试使用AngularJS自定义指令。 我在指令的链接功能中使用(或理解…)隔离范围时遇到麻烦。 这是我应用程序这部分的代码: view.html 是在viewCtrl范围内发布的变量,其中包含请求的xml字符串。 rawData.js raw-data.html 我不明白为什么弹出模式时会显示ID正确,但是当我尝试使用它时,其值是不确定的。 也许我对隔离的范围值(和)错了。 感

  • 问题内容: 我想编写带有隔离范围的指令,但也想使该范围可用于父范围的控制器。我找到了这个解决方案: 参见柱塞。 我觉得这有点丑陋,因为它涉及用HTML编写属性,而在控制器的代码中,您无法确定范围属性的来源。有一个更好的方法吗? 编辑: 此外,似乎在运行控制器“ Main”时$ scope.popup甚至不可用。指令的链接功能尚未执行? 问题答案: 为了保持适当的关注点分离,您不应该混合作用域。更不

  • 问题内容: 我正在尝试从链接函数中查看模型值。 当我在控制器内更改模型值时,不会触发$ watch函数。 小提琴:http : //jsfiddle.net/dkrotts/BtrZH/4/ 我在这里想念什么? 问题答案: 问题是您输入的内容等于“ myModel”。您的范围中没有“ myModel”绑定。您要“建模”。那就是您指令范围内的内容。参见http://jsfiddle.net/BtrZ