雙向綁定不與指令範圍transcluded

工作，我在這勢必模型name控制器已經一個文本框。還有的控制器內的指令和有指令內的另一個文本框被綁定到相同型號name：雙向綁定不與指令範圍transcluded

<div class="border" ng-controller="editCtrl"> 
    Controller: editCtrl <br/> 
    <input type="text" ng-model="name" /> 
    <br/> 
    <tabs> 
     Directive: tabs <br/> 
     <input type="text" ng-model="name"/> 
    </tabs> 
</div>

mod.directive('tabs', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    template: 
     '<div class="border" ng-transclude></div>', 
    }; 
});

當你在外部文本框中輸入的東西會反映在內部文本但如果您在內部文本框中輸入某些內容，它將停止工作，即兩個文本框不再反映相同的值。

見例如在：http://jsfiddle.net/uzairfarooq/MNBLd/

我也使用兩種方式結合ATTR（scope: {name: '='}）嘗試，但它提供了語法error.And使用scope: {name: '@'}具有同樣的效果。

任何幫助將不勝感激。

除了接受的答案，this article真的幫助我瞭解兒童scpoes原型繼承。我強烈建議任何有問題的人都可以仔細閱讀。

來源

2013-01-23 Uzair Farooq

無關，但我不會使用無效的HTML元素（「標籤」） –

@ajkochanowicz這是沒有錯的，除非你想要支持那個古老而討厭的IE。儘管如此，還是有解決方法。 – Frizi

128

與transclude: true導致指令創建一個新的（transcluded）子作用域的指令。這個新的範圍原型從父範圍繼承。在你的情況下，父範圍是與editCtrl控制器關聯的範圍。

在孩子使用範圍雙向數據綁定（即，NG-模型）綁定到持有原始值父作用域屬性（例如，name）始終產生問題 - 嗯，我應該說，它不沒有按預期工作。當子項中的scope屬性發生更改（例如，您鍵入第二個文本框）時，子項創建一個新的範圍屬性，用於隱藏/隱藏相同名稱的父範圍屬性。如果父屬性包含原始值，則在創建子屬性時，該值（基本上）被複制到子屬性。子範圍的未來更改（例如第二個文本框）僅影響子屬性。

在鍵入第二個文本框之前（即在子級中更改屬性之前），子/跨行範圍通過原型繼承（下圖中的虛線）查找父範圍內的name屬性。這就是兩個文本框最初保持同步的原因。下面，如果鍵入「標記」到第一個文本框，這是示波器的樣子：

我創建了一個fiddle在那裏你可以檢查兩個範圍。在輸入第二個文本框之前，單擊第二個文本框旁邊的「顯示範圍」鏈接。這將允許您查看被跨越的子範圍。您會注意到，此時它沒有name屬性。清除控制檯，鍵入第二個文本框，然後再次單擊該鏈接。您會注意到子範圍現在有一個name屬性，並且初始值是父屬性具有的值（「標記」）。如果你輸入「喜歡角」進入第二個文本框，這是該領域的樣子：

解決辦法有兩個：

做什麼@ pgreen2建議（這是「最佳實踐」解決方案） - 使用對象而不是原語。當使用對象時，子/ transcluded作用域不會獲得新屬性。這裏只有原型繼承。在下面的圖片中，假設editCtrl的$範圍已定義這個對象：（這是一個脆弱的解決方案，而不是推薦，因爲它的前提關於HTML結構）在兒童範圍

使用$父：
$scope.myObject = { name: "Mark", anotherProp: ... } ：在< input>內使用ng-model="$parent.name"，這是在< tabs>元素內。上面的第一張照片顯示了這是如何工作的

使用scope: {name: '='}時會出現語法錯誤，因爲使用雙向數據綁定時（即使用'='時），不允許使用插值 - 即{{}}不能使用。而不是<tabs name="{{name}}">使用<tabs name="name">。

使用'@'的作用與transclude相同，因爲ng-transclude使用transcluded作用域，而不是使用scope: { ... }創建的隔離作用域。

對於（大量）有關作用域的詳細信息（包括圖片）看到
What are the nuances of scope prototypal/prototypical inheritance in AngularJS?