Menu
I just started with AngularJS and I'm trying to share data between two ng-controllers (both controllers are in the same ng-app module) using a factory. Data(HTML input field) from controller1 seems to get shared with controller2 most of the times; but when I delete all contents of the input field, the $watch doesn't seem to work! I'm finding it a little hard to explain in words. The screenshots below might help.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<% include ../partials/head %>
</head>
<body class="container" ng-app='myApp'>
<div ng-controller="ctrl1">
<input type="text" ng-model="firstName">
<br>
Input is : <strong>{{firstName}}</strong>
</div>
<div ng-controller="ctrl2">
Input should also be here: {{firstName}}
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.factory('Data', function () {
var data = {
FirstName: ''
}
return {
getFirstName: function () {
return data.FirstName;
},
setFirstName: function (x) {
data.FirstName = x;
}
}
});
myApp.controller('ctrl1', function ($scope, Data) {
$scope.firstName = ''
$scope.$watch('firstName', function(newVal){
if(newVal){Data.setFirstName(newVal);}
});
});
myApp.controller('ctrl2', function ($scope, Data) {
$scope.$watch(function(){return Data.getFirstName();}, function(newVal){
if(newVal){$scope.firstName = newVal;}
});
});
</script>
</body>
<footer>
<% include ../partials/footer %>
</footer>
</html>
There's also a jsfiddle I found for this code. http://jsfiddle.net/5LL3U/2/
Any help is appreciated. Thanks!
382
You need to check both newValue with oldValue for this.In case of empty newValue it is not calling your factory and will not set the value on the variable. :-
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
var data =
{
FirstName: ''
};
return {
getFirstName: function () {
return data.FirstName;
},
setFirstName: function (firstName) {
data.FirstName = firstName;
}
};
});
myApp.controller('FirstCtrl', function( $scope, Data ) {
$scope.firstName = '';
$scope.$watch('firstName', function (newValue,oldValue) {
console.log(oldValue+" "+newValue);
if (newValue!=oldValue) Data.setFirstName(newValue);
});
});
myApp.controller('SecondCtrl', function( $scope, Data ){
$scope.$watch(function () { return Data.getFirstName(); }, function (newValue,oldValue) {
if (newValue!=oldValue) $scope.firstName = newValue;
});
});
Fiddle:-http://jsfiddle.net/1d1vL1hd/
143
Your condition is wrong. When empty, newValue is falsy and firstName doesn't get updated.
function (newValue) {
if (newValue) Data.setFirstName(newValue);
});
So you need to change or remove your condition.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
