Feel free to reach out if you require additional information or need further clarification. I've experimented with various approaches to solve this issue, but so far haven't been successful.
I'm relatively new to working with angularJS and I'm currently attempting to develop an application with multiple layers of data. Initially, I have some basic user details stored in the body scope under controller PageController. Following that, there is a settings form that is loaded using $routeParams (with controller SettingsController) which includes a couple of custom directives for templating purposes. As the directives are nested inside each other, transclusion is used to load the second directive within the first one. So far, everything seems to be functioning correctly.
However, my challenge lies in referencing the field user.firstname from within the innermost directive and implementing two-way databinding to enable changes made in the textbox to reflect on the value in the PageController scope as well. I understand that most issues like these stem from using primitives in ng-model, despite my attempts to enclose everything in an extra object to trigger prototypal inheritance, it hasn't worked. What could possibly be wrong here?
Here's a JSFiddle link to my code, simplified to isolate the problem. In this example, when typing in the outer textbox directly connected to the PageController scope, it alters the inner textbox until modifications are made to the latter, after which the connection breaks. It appears to resemble the typical problem associated with using primitives, as mentioned in similar queries, yet I can't identify the exact issue at play 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"
}
}
}
});