定義Angular指令時的父子範圍層次結構

我正在學習AngularJS，並且正在閱讀有關將指令的父範圍的變量綁定到指令的隔離範圍的方法。我對範圍層次結構有一些理解問題。定義Angular指令時的父子範圍層次結構

有簡單和工作顏色選擇器指令例如：

的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中實例化。我不明白是什麼使他們對指令的父範圍？

---編輯--- 爲了讓我的困惑更加清晰，我創建如下圖：

用於顏色選取器初始化屬性無處聲明爲控制器的一部分。我能在其他地方訪問這些屬性嗎？
我認爲，顏色選擇器範圍 - 紅色範圍是指令的範圍。但是該指令在其父範圍內訪問這些屬性。所以，紅色範圍實際上是藍色的？

來源

2016-06-23 karlitos

例如，您無法將[scope.x]從[childController]發送到[parentController]，因爲[scope.x]沒有在[parentController]中定義，在這種情況下首先必須定義[scope。 x]，然後將其發送到指令進行更改，然後再次將其返回給控制器以獲取範圍結果。 – Maher

感謝您的回覆，但在此示例中沒有使用明確模型聲明（$ scope.x）的控制器。我剛剛在AngularJS書中找到了這個例子。 – karlitos

我想我找到了解釋我的問題。所述分離的範圍一個指令和一個外部世界的的屬性之間的連接，將範圍完成：使用@ = &運算符（前綴）對象創建分離範圍和之間的關係該指令可以從父範圍

的Angular Wiki說進一步實例化的屬性，下面這個話題：

...指令通常需要訪問幾個父範圍屬性。對象散列用於設置父範圍和隔離範圍之間的雙向綁定（使用'='）或單向綁定（使用'@'）。還有'&'綁定到父範圍表達式。所以，這些都創建派生自父範圍的本地範圍屬性。請注意，屬性用於幫助設置綁定 - 您不能僅引用對象散列中的父級範圍屬性名稱，您必須使用屬性。例如，如果你想綁定到隔離範圍內的父屬性parentProp，這將不起作用：範圍：{localProp：'@parentProp'}。必須使用屬性來指定指令要綁定到的每個父屬性：和scope：{localProp：'@theParentProp'}。

我想，這應該是更好地解釋in the book我讀，它描述了連接的隔離範圍和父範圍之間的鏈接。事實上，這是使用中間階段進行：分離範圍< =>指令屬性< =>父範圍

Umur Kontaci還創建some helpful examples這個主題。

來源

2016-06-27 08:20:01 karlitos

定義Angular指令時的父子範圍層次結構

回答

相關問題