我正在嘗試設置Angular指令，以便我可以重新使用一段HTML。我已經設法實現了這一點，但是我面臨的問題是，當我想從包含的HTML中傳遞一些值到模板HTML中時。爲了簡單起見，我將使用具有多個地址的客戶（在此上下文中，客戶是對象並且每個地址實例是附加到客戶的另一個對象）的示例。數據AngularJS - 更改指令的範圍

例子：

var customer = { 
    forename: "John", 
    surname: "Smith", 
    address1: { 
     street: "123 Street", 
     town: "Georgeville", 
    }, 
    address2: { 
     street: "67 Maple Grove", 
     town: "SomeTown" 
    } 
};

這裏是我的指令設置的例子：

var module = angular.module(...); 
module.directive("address", function() { 
    return { 
     restrict: 'A', 
     templateUrl: '/AddressView.html' 
    }; 
});

而且我嘗試使用：

<div ng-model="customer"> 
    <div address></div> 
    <div address></div> 
</div>

這是我會希望能夠將客戶的地址傳遞給模板化的HTML：

<div ng-model="customer"> 
    <div address ng-model="customer.address1"></div> 
    <div address ng-model="customer.address2"></div> 
</div>

我可能誤解了指令的目的，或者這可能是不可能的，但如果有人有任何建議，他們將不勝感激。

讓我知道你是否需要我添加任何進一步的信息。

編輯

這裏是一個Plunker，我已成立，試圖說明什麼，我想要的目的。

來源

2013-04-12 Samuel Slade

您需要隔離您的指令的範圍，以避免讓角度混淆。而你的目標是更好的結構是這樣的：

var customer = { 
    forename: "John", 
    surname: "Smith", 
    addresses: [ 
     address1: { 
      street: "123 Street", 
      town: "Georgeville", 
     }, 
     address2: { 
      street: "67 Maple Grove", 
      town: "SomeTown" 
     } 
    ] 
};

這種方式，你可以這樣做：

<div class="customer"> 
    <div address ng-repeat="address in customer.addresses"> 
     {{address.town}} {{address.street}} 
    </div> 
</div>

爲什麼採用NG-模型在這裏找你，我不知道？
這是一個例子，但是如果你提供一個plunker的示例代碼，將會使你更容易。

更新：

首先你的NG-控制器在你需要把它移動了，因此地址的指令可能是在控制器的範圍，以便它可以訪問該地址的對象錯了地方。
第二你有2個未定義的變量：街道和城鎮。
而您需要隔離範圍，以便每個指令不會混淆另一個指令的變量。

這是一個工作plunker。
希望得到這個幫助。

來源

2013-04-12 09:30:38

感謝您的回覆。我試圖弄清楚如何在多個地方使用這個「地址」HTML（不一定在一個對象集合中 - 我可能有單個對象，我希望通過它）。我會考慮設立一個Plunker的例子。 –

我用Plunker樣本更新了我的問題。 –

檢查更新後的答案。 –

AngularJS - 更改指令的範圍

回答

更新：

相關問題