嵌套指令中的 AngularJS 双向数据绑定
[英] AngularJS Two-way Data Binding in Nested Directives
本文介绍了嵌套指令中的 AngularJS 双向数据绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果您需要更多信息或希望我澄清任何事情，请告诉我.我尝试了很多不同的方法来解决这个问题，但还没有找到解决方案.
我对 angularJS 比较陌生，我正在尝试构建一个具有多层数据的应用程序.我有一些基本的用户信息存储在控制器 PageController 的主体范围内.然后我有一个使用 $routeParams(带有控制器 SettingsController)加载的设置表单，其中包含几个用于模板目的的自定义指令.由于指令是嵌套的，我使用嵌入来加载第一个内部的第二个.这一切似乎都正常.
我的问题是我试图从最里面的指令中引用字段 user.firstname 并希望使用双向数据绑定来允许对文本框所做的更改以导致PageController 范围也要更改.我知道很多这类问题是由在 ng-model 中使用原语引起的，但是我尝试将所有内容都放在一个额外的对象中，以便触发原型继承无济于事.我在这里做错了什么?
这是我的代码的 JSFiddle，已尽可能精简以隔离问题.在这个例子中，如果我输入直接在 PageController 作用域上的外部文本框，它将修改内部文本框，直到该文本框被修改，然后连接断开.这看起来就像其他问题中描述的使用原语的问题，但我无法弄清楚问题出在哪里.
HTML:
<div class="listing-event-wrap"><input type="text" ng-model="user.firstname"/><div ng-controller="设置控制器"><section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}"><div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" value="user.firstname"></div></节>
角度指令:
app.directive('formrow', function() {返回 {范围: {标签: "@label",类型:@type"，价值:=价值"},替换:真的，模板:'<div class="form-row">'+'<div class="form-label" data-ng-show="label">{{label}}</div>'+'<div class="form-entry" ng-switch on="type">'+'<input type="text" ng-model="value" data-ng-switch-when="textInput"/>'+'</div>'+'</div>'}});app.directive('block', function() {返回 {范围: {标题: "@title",描述:@描述"},转置:真实，替换:真的，模板:'<div class="page-block">'+'<h2 data-ng-show="title">{{title}}</h2>'+'<p class="form-description" data-ng-show="description">{{description}}</p>'+'<div class="block-inside" data-ng-transclude></div>'+'</div>'}});
角度控制器:
app.controller("PageController", function($scope) {$scope.user = {名字:约翰"};});app.controller("SettingsController", function($scope) {$scope.data = {更新信息: {title: "更新您的信息",description: "此处有说明",标签: {名字:名字"}}}});
解决方案
我很抱歉之前的代码.试试这个:http://jsfiddle.net/CxNc2/2/
我现在不是传递实际值，而是传递对象 + 指向内部正确值的指针.我在这里添加了引用对象":
<div class="listing-event-wrap"><input type="text" ng-model="user.firstname"/><div ng-controller="设置控制器"><section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}"><div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" refobj='user' value="firstname"></div></节>
我在这里添加了 refobj + value:
app.directive('formrow', function() {返回 {范围: {标签: "@label",类型:@type"，价值:@价值"，引用对象:="},替换:真的，模板:'<div class="form-row">'+'<div class="form-label" data-ng-show="label">{{label}}</div>'+'<div class="form-entry" ng-switch on="type">'+'<input type="text" ng-model="refobj[value]" data-ng-switch-when="textInput"/>'+'</div>'+'</div>'}
Please let me know if you need more information or want me to clarify anything. I have tried a lot of different things to figure this out but haven't found a solution.
I'm relatively new to angularJS and I am trying to build an app with several layers of data. I have some basic user information stored in the scope of the body on controller PageController. I then have a settings form that loads in using $routeParams (with controller SettingsController) that includes a couple of custom directives for templating purposes. Since the directives are nested, I am using transclusion to load the second one inside of the first. This all seems to be working alright.
My problem is that I am trying to reference the field user.firstname from within the innermost directive and want to use two-way databinding to allow changes made to the textbox to cause the value at the PageController scope to change as well. I know that a lot of these kinds of problems are caused by using primitives in ng-model, but I have tried putting everything within an extra object so that I trigger prototypal inheritance to no avail. What am I doing wrong here?
Here's a JSFiddle of my code, stripped down as much as possible to isolate the problem. In this example, if I type in the outside textbox, which is directly on the PageController scope, it will modify the inner textbox until that textbox is modified, upon which the connection is broken. This seems just like the problem of using primitives as described in other questions, but I can't figure out where the issue is here.
HTML:
<body class="event-listing" ng-app="app" ng-controller="PageController">
<div class="listing-event-wrap">
<input type="text" ng-model="user.firstname" />
<div ng-controller="SettingsController">
<section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
<div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" value="user.firstname"></div>
</section>
</div>
</div>
</body>
Angular Directives:
app.directive('formrow', function() {
return {
scope: {
label: "@label",
type: "@type",
value: "=value"
},
replace: true,
template: '<div class="form-row">' +
'<div class="form-label" data-ng-show="label">{{label}}</div>' +
'<div class="form-entry" ng-switch on="type">' +
'<input type="text" ng-model="value" data-ng-switch-when="textInput" />' +
'</div>' +
'</div>'
}
});
app.directive('block', function() {
return {
scope: {
title: "@title",
description: "@description"
},
transclude: true,
replace: true,
template: '<div class="page-block">' +
'<h2 data-ng-show="title">{{title}}</h2>' +
'<p class="form-description" data-ng-show="description">{{description}}</p>' +
'<div class="block-inside" data-ng-transclude></div>' +
'</div>'
}
});
Angular Controllers:
app.controller("PageController", function($scope) {
$scope.user = {
firstname: "John"
};
});
app.controller("SettingsController", function($scope) {
$scope.data = {
updateInfo: {
title: "Update Your Information",
description: "A description here",
labels: {
firstname: "First Name"
}
}
}
});
解决方案
I'm sorry for the previous code. Try this instead: http://jsfiddle.net/CxNc2/2/
Instead of passing the actual value, I'm now passing the object + a pointer to the correct value inside. I added 'refobject' here:
<body class="event-listing" ng-app="app" ng-controller="PageController">
<div class="listing-event-wrap">
<input type="text" ng-model="user.firstname" />
<div ng-controller="SettingsController">
<section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
<div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" refobj='user' value="firstname"></div>
</section>
</div>
</div>
</body>
and I added refobj + value here:
app.directive('formrow', function() {
return {
scope: {
label: "@label",
type: "@type",
value: "@value",
refobj: "="
},
replace: true,
template: '<div class="form-row">' +
'<div class="form-label" data-ng-show="label">{{label}}</div>' +
'<div class="form-entry" ng-switch on="type">' +
'<input type="text" ng-model="refobj[value]" data-ng-switch-when="textInput" />' +
'</div>' +
'</div>'
}
这篇关于嵌套指令中的 AngularJS 双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
