Within my controller, there is a textbox linked to the model name. Inside this controller, there is a directive containing another textbox also bound to the model name:
<div class="border" ng-controller="editCtrl">
Controller: editCtrl <br/>
<input type="text" ng-model="name" />
<br/>
<tabs>
Directive: tabs <br/>
<input type="text" ng-model="name"/>
</tabs>
</div>
mod.directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
template:
'<div class="border" ng-transclude></div>',
};
});
Typing in the outer textbox updates the inner textbox accordingly. However, typing in the inner textbox disconnects this synchronization ie. both textboxes no longer reflect the same value.
Example can be found at: http://jsfiddle.net/uzairfarooq/MNBLd/
I have attempted using two-way binding attributes (scope: {name: '='}), but it results in syntax errors. Additionally, utilizing scope: {name: '@'} yields the same outcome.
Any assistance on this matter would be greatly valued.
In alignment with the acknowledged solution, this informative article significantly contributed to my comprehension of prototypical inheritance within child scopes. I highly recommend anyone facing scope-related issues to delve into it comprehensively.