Model binding doesn't work in fa-surface.
usagi-f opened this issue · comments
After I have changed a model from a view within 'fa-surface',
if I rechanged the model by controller's function, it doesn't reflect to the view.
The version.
- famous-angular: 0.5.0
- angular: 1.2.28
Example HTML
<body ng-controller="mainCtrl">
<div class="block1">
<textarea ng-model="one"></textarea>
<button ng-click="clickone()">button 1</button>
</div>
<fa-app>
<fa-surface>
<div class="block2">
<textarea ng-model="two"></textarea>
<button ng-click="clicktwo()">button 2</button>
</div>
</fa-surface>
</fa-app>
</body>
Example Javascript
.controller('mainCtrl', ['$scope', function($scope) {
$scope.one = 'initial one';
$scope.two = 'initial two';
$scope.clickone = function() {
$scope.one = 'clicked one';
};
$scope.clicktwo = function() {
$scope.two = 'clicked two';
};
}]);Example steps
- initial view:
- 'initial one'
- 'initial two'
- click button 1:
- 'clicked one' -- OK
- 'initial two'
- edit first textarea:
- 'editted one' -- OK
- 'initial two'
- click button 1 again:
- 'clicked one' -- OK
- 'initial two'
- click button 2:
- 'clicked one'
- 'clicked two' -- OK
- edit second textarea:
- 'clicked one'
- 'editted two' -- OK
- click button 2 again:
- 'clicked one'
- 'editted two' -- Wrong!
Please confirm about the behavior above.
Thanks.
Hello,
You should use an object to store your ng-model value like this :
$scope.input = {}
$scope.input.one = 'initial one';
$scope.input.two = 'initial two';
it avoids this kind of weird issue : http://codepen.io/Kelevra/pen/VYQaYa.
Thank you so much for your help. I appreciate it.
That is so useful. I’ll try that way and check it if it works.
However I would like to know the fundamental solution about this issue..
If you know the solution, I would like you to teach me that.
Thank you.
You are in two different scopes! When you declare fa-app you should list a controller, then your problem becomes a little more self evident.
When you click on the button, angular will start at the current scope and look for clicktwo(). If it doesn't find it, angular will traverse the tree of child-parent scope relationships looking for the first instance of clicktwo(). So when you click the button, the model is being updated correctly, but it's not being updated where you [should] think it is.
The use of ng-model binds the value to that scope. So the model is also being updated with the correct edited value (this time where you [should] expect it).
When you wrap your model in an input object, ng-model will search the current scope for that instance. When it doesn't find input in the current scope it will again traverse the child-parent scope tree until it finds and instance of input.
So the solution proposed by @SuPenguin is really pretty dangerous because it completely ignores the fact that you are on two different scopes.