I have a specific requirement to transfer the scope of one directive to another directive and enable two-way binding.
The goal is to update JSON values whenever the ng-model changes. In the example below, the JSON contains rowsets with attributes that need to be bound to controls (textbox) using ng-model=CuId. Therefore, when the value of the corresponding attribute changes, the JSON should automatically update.
Source Code:
var app = angular.module("myApp", []);
app.directive("main", function() {
});
app.directive("sub1", function() {
return {
restrict: 'E',
replace: true,
template : "<h1>sub1</h1>",
link: function($scope, element, attrs) {
$scope.soJSON={
"entityinfo": {
"entity": "Customer29Jan16",
"tenantId": "292FEC76-5F1C-486F-85A5-09D88096F098",
"timeStamp": "2016-04-07T10:33:38.507Z"
},
"collections": {
"Customer29Jan16": {
"meta": {
"parentreference": "***",
"pkname": "***",
"fkname": "***"
},
"rowset": [
{
"CuId": "test",
"Name": "test",
"Quantity": "test"
}
],
"rowfilter": []
}
}
}
}
};
});
app.directive("sub2", function() {
return {
template : "<input ng-model=CuId> <input ng-model=Name> <input ng-model=Quantity>"
};
});
HTML Code:
<div ng-app="myApp">
<main>
<sub1>Test<</sub1>
<sub2>Test<</sub2>
</main>
</div>
JS Fiddle Link : https://jsfiddle.net/bagya1985/23vz1xux/1/