Essentially, I am facing an issue with a directive that is utilized by two different forms. When the page loads, each form displays the default properties provided by the directive. The challenge arises when both forms require a checkbox option to apply these properties to the other form as well. Each form has its own HTML template and controller.
return function row(ModelService) {
return {
restrict: 'E',
templateUrl: function(elem, attr) {
return elem.templateUrl;
},
scope: {
formTitle: '@',
type: '@'
},
link: function(scope, elem) {
scope.setDefault = function() {
.
. settings for scope defined here
.
.
.
}
scope.close = function (action) {
.
. if(checked) {
. code to apply settings to the other form
. }
.
.
.
}
};
});<div ng-controller="app.FirstCtrl">
<propFilter form title="someTitle" template-url="someUrl"></propFilter>
.
. multiple div elements with ng-model
.
.
.
<input id="applyToOther" type="checkbox">
</div>
<div ng-controller="app.secondCtrl">
<propFilter form title="someTitle" template-url="someUrl"></propFilter>
.
. multiple div elements with ng-model
.
.
.
<input id="applyToOther" type="checkbox">
</div>I am seeking guidance on how to replicate the properties of one scope onto another using the same directive, if possible. Any assistance would be greatly appreciated. Thank you!