將ngInclude綁定到不同的模型

是否可以爲ngInclude指定模型，以便在包含的模板內完成的任何更改都反映在指定的模型上。例如：將ngInclude綁定到不同的模型

我有一個模型，如：

$scope.member = { 

    name: "Member1", 
    children:[ 
    { 
     name:"Child1" 
    }, 
    { 
     name:"Child2" 
    } 
    ] 
};

和模板：

<script type="text/ng-template" id="name.html"> 
    <input type="text" ng-model="member.name"/> 
</script>

現在是有可能通過ngInclude無論是「成員」或任何兒童，並獲得各自的名稱屬性修改？我嘗試將ng模型傳遞給ng模板，但它不起作用。我試圖動態加載範圍與預期的模型，但如果模型得到刪除，我留下一個孤兒模板。以下是的jsfiddle代碼：

http://jsfiddle.net/vaibhavgupta007/p7E5K/

我希望重新使用該模板而不是重複用於不同型號相同的模板。我已經refered這個問題：

How to specify model to a ngInclude directive in AngularJS?

但這裏的模型沒有得到刪除。

編輯

我還沒有掌握到現在爲止創建自定義指令的概念。但會與ng-include幫助一起創建一個新的指令嗎？

來源

2013-03-29 Vaibhav

使用指令或綁定選擇事件到您的表單可能更容易appraches。例子太粗糙，無法理解用法。你能提供一個你想如何使用它的HTML呈現？ – charlietfl

你最後一個問題的答案是：是的。在一個指令中，你也定義了一個模板和一個範圍。範圍的內容完全掌握在你的手中。

在這裏看到：http://jsfiddle.net/vgWQG/1/

用法：

Member: <member model="member"></member> 
<ul> 
    <li ng-repeat="child in member.children"> 
     Child {{$index}}: <member model="child"></member> 
    </li> 
</ul>

的指令：

app.directive('member', function(){ 
return { 
    template : '<input type="text" ng-model="member.name"/>', 
    replace : true, 
    restrict: 'E', 
    scope : { 
     'member' : '=model' 
    }, 
    link: function(scope, element, attr) {} 
};

}）;

我已經將模板移入了內聯變體，因爲我無法讓模板緩存開始在jsfiddle中工作。在現實世界中，一個templateUrl：'name.html'應該沒問題。

這是你想要的嗎？

來源

2013-03-29 13:24:44 knalli

但是，正確的命名將是_member-editable_或一個額外的屬性_editable_，用於呈現輸入，而不是默認的只讀值。 – knalli

感謝您的回覆。這正是我需要的。指令中的templateUrl是否總是需要外部資源？該模板包含在我的頁面中，但templateUrl =「'name.html'」發送請求。 – Vaibhav

@knali感謝您的幫助。但是我陷入另一種情況。模板無法訪問控制器作用域中的任何屬性。請參考這個小提琴：http://jsfiddle.net/vaibhavgupta007/mVBaC/1/ – Vaibhav

將ngInclude綁定到不同的模型

回答

相關問題