如果您需要更多信息或希望我澄清任何内容,请通知我.我已经尝试了很多不同的事情来解决这个问题,但是还没有找到解决方案.
我对angularJS来说比较新,我正在尝试构建一个包含多层数据的应用程序.我有一些基本的用户信息存储在控件PageController上的body的范围内.然后我有一个设置表单加载使用$routeParams(与控制器SettingsController),其中包含一些用于模板目的的自定义指令.由于这些指令是嵌套的,所以我使用transclusion来加载第二个指令.这一切似乎都很好.
我的问题是我试图从最内层的指令中引用user.firstname的字段,并希望使用双向数据绑定来允许对文本框进行的更改导致PageController范围内的值也改变.我知道很多这样的问题是在ng模型中使用原语引起的,但是我已经尝试将所有内容放在一个额外的对象中,以便触发原型继承无效.我在这里做错了什么？
这是我的代码中的一个JSFiddle,尽可能地剥离了这个问题.在这个例子中,如果我输入外部的文本框,它直接在PageController范围上,它将修改内部文本框,直到该文本框被修改为止,连接断开.这似乎就像其他问题中所描述的使用原语的问题一样,但是我无法确定问题出在哪里.
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>
角度指令：
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,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>'
}
});
角度控制器：
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"
}
}
}
});
解决方法
对于以前的代码我很抱歉试试这个：
http://jsfiddle.net/CxNc2/2/
我现在不用传递实际的值,而是将对象的指针传递给正确的值.我在这里添加了’refobject’：
<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>
我在这里添加了refobj值：
app.directive('formrow',function() {
return {
scope: {
label: "@label",value: "@value",refobj: "="
},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>'
}