将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绑定到不同的模型

回答

相关问题