Question

我正在学习AngularJS，并且正在阅读将变量从指令的父范围绑定到指令的隔离范围的方法。我对范围层次结构有一些了解。

有一个简单而有效的颜色选择器指令示例：

的index.html

<!DOCTYPE html>
<html ng-app="colorPickerApp">
<head>
  <meta charset="utf-8">
  ...
</head>
<body>    
  <h1>AngularJS Colorpicker</h1>

  <color-picker init-r="255"
    init-g="0"
    init-b="123"
    init-a="0.7"
    on-change="onColorChange(r, g, b, a)">
  </color-picker>    
  <script type="text/javascript" src="colorPickerApp.js"></script>
</body>
</html>

colorPickerApp.js

var colorPickerApp = angular.module('colorPickerApp', []);

colorPickerApp.directive('colorPicker', function(){
  return {
    scope: {
      r: '@initR', // init-r <==> initR
      g: '@initG',
      b: '@initB',
      a: '@initA',
      onChange: '&'
    },
    restrict: 'E',
    templateUrl: './ColorPicker.html',
  };
});

ColorPicker.html

Red channel:<input type="range" min="0" max= "255" step="1" ng-model="r"><br>
Green channel:<input type="range" min="0" max="255" step="1" ng-model="g"><br>
Blue channel:<input type="range" min="0" max="255" step="1" ng-model="b"><br>
Alpha channel:<input type="range" min="0" max="1" step="0.01" ng-model="a">
<div style="width: 300px; height: 100px; background-color: rgba( {{r}}, {{g}}, {{b}}, {{a}});">
<div>

因此，显然， initR / G / B / A 来自指令的父范围。根据定义，范围是“...在某个上下文中定义的变量或函数集。上下文是DOM的某个部分” 我的模板在 index.html 中使用这些属性进行实例化。我不明白是什么使它们成为指令的父范围？

---编辑--- 为了使我的困惑更清楚，我创建了以下图像：

用于颜色选择器初始化的属性未被声明为控制器的一部分。我可以在其他地方访问这些属性吗？
我希望，颜色选择器范围 - 红色范围将是指令的范围。但该指令在其父作用域中访问这些属性。因此，红色范围实际上是蓝色的???

Answer 1

我想我找到了对我的问题的解释。指令的隔离范围的属性与外部世界之间的链接，使用 @在范围：对象中完成=＆amp; 运算符（前缀）在隔离范围和指令的属性之间创建关系，可以从父范围进一步实例化

Angular Wiki说明了以下主题：

...指令通常需要访问一些父作用域属性。对象散列用于在父作用域和隔离作用域之间设置双向绑定（使用'='）或单向绑定（使用'@'）。还有'＆amp;'绑定到父范围表达式。因此，这些都创建了从父作用域派生的本地作用域属性。请注意，属性用于帮助设置绑定 - 您不能仅在对象哈希中引用父范围属性名称，您必须使用属性。例如，如果要绑定到隔离范围中的父属性parentProp，则这将不起作用：和scope：{localProp：'@ parentProp'}。必须使用属性来指定指令要绑定到的每个父属性：和scope：{localProp：'@ theParentProp'}。

我认为，这应该更好地解释in the book我正在阅读，它将链接描述为隔离范围与父范围之间的链接。事实上，这是使用中间阶段完成的：隔离范围＆lt; =＆gt;指令属性＆lt; =＆gt;父范围

Umur Kontaci还为此主题创建了some helpful examples。

定义Angular指令时的父子范围层次结构

1 个答案: